WinRT XAML工具包圖表控件：如何設置圖例項目的樣式？

我想要設置WinRT XAML Toolkit圖表控件的圖例項。WinRT XAML工具包圖表控件：如何設置圖例項目的樣式？

我檢查了源代碼，發現了以下樣式：

<ResourceDictionary 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:datavis="using:WinRTXamlToolkit.Controls.DataVisualization"> 

    <Style 
     TargetType="datavis:Legend"> 
     <Setter 
      Property="BorderBrush" 
      Value="Black" /> 
     <Setter 
      Property="BorderThickness" 
      Value="1" /> 
     <Setter 
      Property="IsTabStop" 
      Value="False" /> 
     <Setter 
      Property="TitleStyle"> 
      <Setter.Value> 
       <Style 
        TargetType="datavis:Title"> 
        <Setter 
         Property="Margin" 
         Value="0,5,0,10" /> 
        <Setter 
         Property="FontWeight" 
         Value="Bold" /> 
        <Setter 
         Property="HorizontalAlignment" 
         Value="Center" /> 
       </Style> 
      </Setter.Value> 
     </Setter> 
     <Setter 
      Property="Template"> 
      <Setter.Value> 
       <ControlTemplate 
        TargetType="datavis:Legend"> 
        <Border 
         Background="{TemplateBinding Background}" 
         BorderBrush="{TemplateBinding BorderBrush}" 
         BorderThickness="{TemplateBinding BorderThickness}" 
         Padding="2"> 
         <Grid> 
          <Grid.RowDefinitions> 
           <RowDefinition 
            Height="Auto" /> 
           <RowDefinition /> 
          </Grid.RowDefinitions> 
          <datavis:Title 
           Grid.Row="0" 
           x:Name="HeaderContent" 
           Content="{TemplateBinding Header}" 
           ContentTemplate="{TemplateBinding HeaderTemplate}" 
           Style="{TemplateBinding TitleStyle}" /> 
          <ScrollViewer 
           Grid.Row="1" 
           VerticalScrollBarVisibility="Auto" 
           BorderThickness="0" 
           Padding="0" 
           IsTabStop="False"> 
           <ItemsPresenter 
            x:Name="Items" 
            Margin="10,0,10,10" /> 
          </ScrollViewer> 
         </Grid> 
        </Border> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</ResourceDictionary>

，但僅此風格的傳奇容器和標題。

我該如何設計圖例項目？

編輯： 感謝您的回答很多菲利普，這正是我想要的。但Visual Studio中給了我一個錯誤的位置：

<Setter.Value> 
        <ItemsPanelTemplate> 
         <controls:UniformGrid 
          Columns="1" 
          Rows="5" /> 
        </ItemsPanelTemplate> 
       </Setter.Value>

故稱控制：UniformGrid沒有被發現，我去掉這一部分，並設法把事情的工作。

來源

2013-02-13 Mina Samy

首先要注意的一點是，Legend控件是ItemsControl，因此您可以使用ItemContainerStyle對其項目進行樣式設置。項目模板由LegendItem風格管理，您也可以在源代碼中找到它。在應用程序中設置所有樣式的方法是通過在Chart控件上設置LegendStyle屬性來設置Legend的Style。然後在Legend樣式集ItemContainerStyle到Style的LegendItem。我還沒有檢查過Blend中的Chart控件的行爲是否正確，但如果是這樣的話，那將是最好的編輯方式。我只是手工製作了這個樣本。

enter image description here

<charting:Chart 
    x:Name="PieChart" 
    Title="Pie Chart" 
    Margin="70,0"> 
    <charting:Chart.Series> 
     <Series:PieSeries 
      Title="Population" 
      ItemsSource="{Binding Items}" 
      IndependentValueBinding="{Binding Name}" 
      DependentValueBinding="{Binding Value}" 
      IsSelectionEnabled="True" /> 
    </charting:Chart.Series> 
    <charting:Chart.LegendStyle> 
     <Style 
      TargetType="datavis:Legend"> 
      <Setter 
       Property="VerticalAlignment" 
       Value="Stretch" /> 
      <Setter 
       Property="Background" 
       Value="#444" /> 
      <Setter 
       Property="ItemsPanel"> 
       <Setter.Value> 
        <ItemsPanelTemplate> 
         <controls:UniformGrid 
          Columns="1" 
          Rows="5" /> 
        </ItemsPanelTemplate> 
       </Setter.Value> 
      </Setter> 
      <Setter 
       Property="TitleStyle"> 
       <Setter.Value> 
        <Style 
         TargetType="datavis:Title"> 
         <Setter 
          Property="Margin" 
          Value="0,5,0,10" /> 
         <Setter 
          Property="FontWeight" 
          Value="Bold" /> 
         <Setter 
          Property="HorizontalAlignment" 
          Value="Center" /> 
        </Style> 
       </Setter.Value> 
      </Setter> 
      <Setter 
       Property="ItemContainerStyle" 
       xmlns:series="using:WinRTXamlToolkit.Controls.DataVisualization.Charting"> 
       <Setter.Value> 
        <Style 
         TargetType="series:LegendItem"> 
         <Setter 
          Property="Template"> 
          <Setter.Value> 
           <ControlTemplate 
            TargetType="series:LegendItem"> 
            <Border 
             MinWidth="200" 
             Margin="20,10" 
             CornerRadius="10" 
             VerticalAlignment="Stretch" 
             HorizontalAlignment="Stretch" 
             Background="{Binding Background}"> 
             <datavis:Title 
              HorizontalAlignment="Center" 
              VerticalAlignment="Center" 
              FontSize="24" 
              FontWeight="Bold" 
              Content="{TemplateBinding Content}" /> 
            </Border> 
           </ControlTemplate> 
          </Setter.Value> 
         </Setter> 
        </Style> 
       </Setter.Value> 
      </Setter> 
      <Setter 
       Property="Template"> 
       <Setter.Value> 
        <ControlTemplate 
         TargetType="datavis:Legend"> 
         <Border 
          Background="{TemplateBinding Background}" 
          BorderBrush="{TemplateBinding BorderBrush}" 
          BorderThickness="{TemplateBinding BorderThickness}" 
          Padding="2"> 
          <Grid> 
           <Grid.RowDefinitions> 
            <RowDefinition 
             Height="Auto" /> 
            <RowDefinition /> 
           </Grid.RowDefinitions> 
           <datavis:Title 
            Grid.Row="0" 
            x:Name="HeaderContent" 
            Content="{TemplateBinding Header}" 
            ContentTemplate="{TemplateBinding HeaderTemplate}" 
            Style="{TemplateBinding TitleStyle}" /> 
           <ScrollViewer 
            Grid.Row="1" 
            VerticalScrollBarVisibility="Auto" 
            BorderThickness="0" 
            Padding="0" 
            IsTabStop="False"> 
            <ItemsPresenter 
             x:Name="Items" 
             Margin="10,0,10,10" /> 
           </ScrollViewer> 
          </Grid> 
         </Border> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </charting:Chart.LegendStyle> 
</charting:Chart>

來源

2013-02-13 17:24:25

WinRT XAML工具包圖表控件：如何設置圖例項目的樣式？

回答

相關問題