Sunday, August 26, 2012

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




No comments:

Post a Comment

Send us your comment related to the topic mentioned on the blog