用C＃动态改变元素样式

Question

我有一个包含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> 

Answer 1

我测试了你的代码，发现问题的原因。

由于某些未知原因，应用程序未设置字段this.lineChartMood，您将得到NullReferenceException。

你必须自己获得这一系列的对象。有两种可能的方式来得到它：

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 
    } 
} 

然后你就可以参考你的系列无一例外。

Answer 2

lineChartMood.PolylineStyle = this.Resources.PolylineStyle2 as Style; 应该 lineChartMood.PolylineStyle = this.Resources["PolylineStyle2"] as Style;？

Answer 3

为什么不在App.xaml中添加资源并使用App.Current.Resources将其引用？我这样说是因为我觉得程序可能无法引用在特定页面上定义的本地资源。我可能错了。这不仅仅是一种解决方法。