Dynamically change style of element with C#

Dynamically change style of element with C#

I have a chart with 4x LineSeries. I defined two different styles for representing the lines, and I want to be able to change the style applied to a particular LineSeries dynamically (based, for example, on the user tapping a button, etc).

I cannot seem to work out how to update the style from c#. Any help appreciated!

I have tried:

lineChartMood.PolylineStyle = this.Resources.PolylineStyle2 as Style; 

but this returns a Null exception.

Here is the XAML for the page, including the style definitions:

    <phone:PhoneApplicationPage      x:Class="Bhutaan.ChartingTest"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"     xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"     xmlns:charting="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"     xmlns:local="clr-namespace:Bhutaan"     FontFamily="{StaticResource PhoneFontFamilyNormal}"     FontSize="{StaticResource PhoneFontSizeNormal}"     Foreground="{StaticResource PhoneForegroundBrush}"     SupportedOrientations="Portrait" Orientation="Portrait"     mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"     shell:SystemTray.IsVisible="True">      <phone:PhoneApplicationPage.Resources>         <Style x:Key="PolylineStyle" TargetType="Polyline">             <Setter Property="StrokeThickness" Value="5"/>         </Style>         <Style x:Key="PolylineStyle2" TargetType="Polyline">             <Setter Property="StrokeThickness" Value="1"/>         </Style>     </phone:PhoneApplicationPage.Resources>       <!--LayoutRoot is the root grid where all page content is placed-->     <Grid x:Name="LayoutRoot" Background="Transparent">         <Grid.RowDefinitions>             <RowDefinition Height="Auto"/>             <RowDefinition Height="*"/>         </Grid.RowDefinitions>          <!--TitlePanel contains the name of the application and page title-->         <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">             <TextBlock x:Name="ApplicationTitle" Text="TEST" Style="{StaticResource PhoneTextNormalStyle}"/>             <TextBlock x:Name="PageTitle" Text="added" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>         </StackPanel>          <!--ContentPanel - place additional content here-->         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,-0,12,0">             <ScrollViewer>                 <StackPanel>                     <TextBlock Text="Great! That's been saved." FontSize="30" Margin="0,0,0,0"/>                     <!-- Chart  -->                     <charting:Chart                         x:Name="myChart"                         Margin="0,20,0,0"                         Height="350"                         Style="{StaticResource PhoneChartStyle}"                         Template="{StaticResource PhoneChartPortraitTemplate}">                          <!-- Series -->                         <charting:LineSeries                             x:Name="lineChartMood"                             Title="Mood"                             ItemsSource="{Binding}"                             DependentValuePath="MoodValue"                             IndependentValuePath="Timestamp"                             PolylineStyle="{StaticResource PolylineStyle}" >                              <charting:LineSeries.LegendItemStyle>                                 <Style TargetType="charting:LegendItem">                                     <Setter Property="Margin" Value="5 0 5 0"/>                                 </Style>                             </charting:LineSeries.LegendItemStyle>                         </charting:LineSeries>                         <!-- Series -->                         <charting:LineSeries                             Title="Energy"                             ItemsSource="{Binding}"                             DependentValuePath="EnergyValue"                             IndependentValuePath="Timestamp">                             <charting:LineSeries.LegendItemStyle>                                 <Style TargetType="charting:LegendItem">                                     <Setter Property="Margin" Value="5 0 5 0"/>                                 </Style>                             </charting:LineSeries.LegendItemStyle>                         </charting:LineSeries>                         <!-- Series -->                         <charting:LineSeries                             Title="Mental"                             ItemsSource="{Binding}"                             DependentValuePath="MentalValue"                             IndependentValuePath="Timestamp">                             <charting:LineSeries.LegendItemStyle>                                 <Style TargetType="charting:LegendItem">                                     <Setter Property="Margin" Value="5 0 5 0"/>                                 </Style>                             </charting:LineSeries.LegendItemStyle>                         </charting:LineSeries>                         <!-- Series -->                         <charting:LineSeries                             Title="Hunger"                             ItemsSource="{Binding}"                             DependentValuePath="HungerValue"                             IndependentValuePath="Timestamp">                             <charting:LineSeries.LegendItemStyle>                                 <Style TargetType="charting:LegendItem">                                     <Setter Property="Margin" Value="5 0 5 0"/>                                 </Style>                             </charting:LineSeries.LegendItemStyle>                         </charting:LineSeries>                     </charting:Chart>                  </StackPanel>             </ScrollViewer>         </Grid>     </Grid>   </phone:PhoneApplicationPage> 

Answers & Comments...

Answer: 1

lineChartMood.PolylineStyle = this.Resources.PolylineStyle2 as Style; should be lineChartMood.PolylineStyle = this.Resources["PolylineStyle2"] as Style;??

by : TheHehttp://stackoverflow.com/users/1260371

Answer: 2

Why not add your resources in the App.xaml and refer them using App.Current.Resources?? I say this because I feel the program might not be able to refer the local resource defined on the specific page. I might be wrong. This is not a solution just a workaround.

by : Milan Aggarwalhttp://stackoverflow.com/users/1378956

Answer: 3

I tested your code and found the cause of the problem.

You get the NullReferenceException because the field this.lineChartMood isn't set by the application for some unknown reason.

You have to obtain this line series object by yourself. There are two possible ways to get it:

var lineSeriesWay1 = this.FindName("lineChartMood"); var lineSeriesWay2 = myChart.Series.OfType<LineSeries>().First(ls => ls.Name == "lineChartMood"); 

But I would recommend to set the field this.lineSeriesMood explicitly in the constructor, like this:

public partial class MainPage : PhoneApplicationPage {     // Constructor     public MainPage()     {         InitializeComponent();         // because the code 'this.FindName("lineChartMood")' doesn't work in the constructor, I'll use the following line:         this.lineChartMood = this.myChart.Series.OfType<LineSeries>().First(ls => ls.Name == "lineChartMood");          // other code     }       private void Button_Click(object sender, RoutedEventArgs e)     {         this.lineChartMood.PolylineStyle = (Style)this.Resources["PolylineStyle2"];         this.lineChartMood.Refresh(); // you should call this method so that the style is applied     } } 

Then you will be able to reference to your series without exceptions.

by : vorrtexhttp://stackoverflow.com/users/427225

---