用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將其引用？我這樣說是因爲我覺得程序可能無法引用在特定頁面上定義的本地資源。我可能錯了。這不僅僅是一種解決方法。