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>
Answer: 1
lineChartMood.PolylineStyle = this.Resources.PolylineStyle2 as Style;
should be lineChartMood.PolylineStyle = this.Resources["PolylineStyle2"] as Style;
??
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/1378956Answer: 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
No comments:
Post a Comment
Send us your comment related to the topic mentioned on the blog