如何在運行時在每個WPF ListBoxItem中繪製矢量圖形？

Question

我想在WPF ListBoxItem中繪製一個基於矢量的圖形。例如，二維形狀非常簡單，線條或方形/矩形。但是編譯時不會知道形狀和顏色，所以它不能是圖像。

樣品截屏：http://i.stack.imgur.com/EisIQ.jpg（我微薄的代表阻止我張貼的圖片內嵌...）

我相信這應該是可能的WPF？如果是這樣，可能涉及Canvas和Rectangle元素？

非常感謝提前！

編輯

我被貌似只有找到將圖像添加到ListBoxItems的各種例子揭去，所以我真的沒有在挖。多虧了下面的答案讓我過上右腳。

XAML使用兩個DataTemplates和一個基於數據選擇正確模板的模板選擇器的聲明。顏色也被綁定到數據（屬性稱爲LayerColor）

<UserControl.Resources> 
    <!-- to convert the color --> 
    <src:ColorBrushConverter x:Key="colorConverter"/> 
    <!-- to select the correct template based on geom type --> 
    <src:LayerListDataTemplateSelector x:Key="layerDataTemplateSelector"/> 
    <DataTemplate x:Key="lineLayerTemplate"> 
     <Border BorderThickness="0" BorderBrush="Gray" 
       Padding="5" Name="border" Margin="1" > 
      <Grid> 
       <Grid.RowDefinitions> 
        <RowDefinition/> 
       </Grid.RowDefinitions> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="50"/> 
        <ColumnDefinition /> 
       </Grid.ColumnDefinitions> 

       <Line Margin="5,0,5,0" Height="16" 
       X1="1" Y1="8" 
       X2="35" Y2="8" 
       Stroke="{Binding Path=LayerColor, Converter={StaticResource colorConverter}}" 
       StrokeThickness="2"/> 

       <TextBlock Grid.Row="0" Grid.Column="1" Margin="5,0,0,0" 
          Name="layerName" Text="{Binding Path=LayerName}"/> 
      </Grid> 
     </Border> 
    </DataTemplate> 
    <DataTemplate x:Key="pointLayerTemplate"> 
     <Border BorderThickness="0" BorderBrush="Gray" 
       Padding="5" Name="border" Margin="1" > 
      <Grid> 
       <Grid.RowDefinitions> 
       <RowDefinition/> 
       </Grid.RowDefinitions> 
       <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="50"/> 
       <ColumnDefinition /> 
       </Grid.ColumnDefinitions> 

       <Polygon Grid.Row="0" Grid.Column="0" Margin="5,0,10,0" 
         Fill="{Binding Path=LayerColor, Converter={StaticResource colorConverter}}" 
         Stroke="Black" StrokeThickness="1" 
         StrokeLineJoin="Round" Width="16" Height="16" 
         Stretch="Fill" 
         Points="8,1 1,8 8,15 15,8 8,1" 
         Visibility="Visible" Name="diamond"/> 

       <TextBlock Grid.Row="0" Grid.Column="1" Margin="5,0,0,0" 
          Name="layerName" Text="{Binding Path=LayerName}"/> 
      </Grid> 
     </Border>  
    </DataTemplate> 
</UserControl.Resources> 
<Grid> 
    <ListBox x:Name="layerListBox" HorizontalContentAlignment="Stretch" HorizontalAlignment="Stretch" 
      ItemTemplateSelector="{StaticResource layerDataTemplateSelector}"> 
    </ListBox> 
</Grid> 

Answer 1

首先要確定是哪裏的知識存在哪些應繪製。

如果可以預先繪製所有可能的圖紙，請將它們放在數據模板中，並將顏色，筆刷和大小等內容綁定到正在顯示的數據上。

然後使用項目模板選擇器根據數據選擇正確的數據模板。

如果圖形出自數據庫，則可能需要將它們作爲資源加載並將數據模板中的圖像綁定到加載位圖。

總而言之，嘗試在使用C＃代碼之前使用模板和綁定，因爲這樣的代碼比數據模板更難維護。

Answer 2

您可以根據型號使用DataTemplate或基於型號上的某些屬性使用DataTemplateSelector。以下是使用數據類型來確定在數據旁邊繪製什麼的一個粗略示例。

<ListBox> 
    <ListBox.Resources> 
    <DataTemplate DataType="{x:Type sys:Int32}"> 
     <StackPanel Orientation="Horizontal"> 
     <Rectangle Fill="Blue" Height="5" Width="5"/> 
     <TextBlock Text="{Binding}" Margin="4,0,0,0"/> 
     </StackPanel> 
    </DataTemplate> 
    <DataTemplate DataType="{x:Type sys:String}"> 
     <StackPanel Orientation="Horizontal"> 
     <Rectangle Fill="Cyan" Height="2" Width="6"/> 
     <TextBlock Text="{Binding}" Margin="4,0,0,0"/> 
     </StackPanel> 
    </DataTemplate> 
    </ListBox.Resources> 
    <sys:Int32>1</sys:Int32> 
    <sys:String>testing testing 1 2 3</sys:String> 
</ListBox>