[英]Dynamically change style of element with C#
我有一張4x LineSeries的圖表。 我定義了兩種用於表示線條的樣式,並且希望能夠動態更改應用於特定LineSeries的樣式(例如,基於用戶點擊按鈕等)。
我似乎無法弄清楚如何從C#更新樣式。 任何幫助表示贊賞!
我努力了:
lineChartMood.PolylineStyle = this.Resources.PolylineStyle2 as Style;
但這會返回Null異常。
這是頁面的XAML,包括樣式定義:
<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>
我測試了您的代碼,並找到了問題的原因。
您會收到NullReferenceException,因為應用程序出於某種未知原因未設置this.lineChartMood
字段。
您必須自己獲取此線系列對象。 有兩種可能的方法來獲取它:
var lineSeriesWay1 = this.FindName("lineChartMood");
var lineSeriesWay2 = myChart.Series.OfType<LineSeries>().First(ls => ls.Name == "lineChartMood");
但是我建議在構造函數中顯式設置字段this.lineSeriesMood
,如下所示:
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
}
}
然后,您將可以毫無例外地參考自己的系列。
為什么不將您的資源添加到App.xaml中並使用App.Current.Resources引用它們呢? 我之所以這樣說,是因為我覺得程序可能無法引用在特定頁面上定義的本地資源。 我可能錯了。 這不是解決方案,只是一種解決方法。
lineChartMood.PolylineStyle = this.Resources.PolylineStyle2 as Style;
應該為lineChartMood.PolylineStyle = this.Resources["PolylineStyle2"] as Style;
??
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.