資源字典中包含標題的多項目組合框？

Question

我已按照this問題的接受答案來定義帶標題的多列組合框。

這不是我的工作，所以我做了一些改變，現在它的工作。這是用於創建帶標題的多列組合框的xaml。

<Page.DataContext> 
     <vm:ItemsViewModel /> 
    </Page.DataContext> 

    <Page.Resources> 
     <CollectionViewSource x:Key="UnitsCollection" Source="{Binding Units}" /> 
    </Page.Resources> 

    <ComboBox Grid.Row="0" Grid.Column="4" Grid.ColumnSpan="2" Grid.IsSharedSizeScope="True" 
       x:Name="cbUnits" ItemsSource="{DynamicResource Items}" IsEditable="True" TextSearch.TextPath="Symbol" 
       SelectedValue="{Binding SelectedUnit}" SelectedValuePath="UnitID"> 
     <ComboBox.Resources> 
      <CompositeCollection x:Key="Items"> 
       <ComboBoxItem IsEnabled="False"> 
        <Grid TextElement.FontWeight="Bold"> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition SharedSizeGroup="A" /> 
          <ColumnDefinition Width="50" /> 
          <ColumnDefinition SharedSizeGroup="B" /> 
         </Grid.ColumnDefinitions> 
         <Grid.Children> 
          <TextBlock Grid.Column="0" Text="Name" /> 
          <TextBlock Grid.Column="2" Text="Symbol" /> 
         </Grid.Children> 
        </Grid> 
       </ComboBoxItem> 
       <Separator /> 
       <CollectionContainer Collection="{Binding Source={StaticResource UnitsCollection}}" /> 
      </CompositeCollection> 

      <DataTemplate DataType="{x:Type models:Unit}"> 
       <Grid> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition SharedSizeGroup="A" /> 
         <ColumnDefinition Width="50" /> 
         <ColumnDefinition SharedSizeGroup="B" /> 
        </Grid.ColumnDefinitions> 
        <Grid.Children> 
         <TextBlock Grid.Column="0" Text="{Binding Name}" /> 
         <TextBlock Grid.Column="2" Text="{Binding Symbol}" /> 
        </Grid.Children> 
       </Grid> 
      </DataTemplate> 
     </ComboBox.Resources> 
    </ComboBox> 

</Page> 

現在，我想在一個資源字典定義<ComboBox.Resources>之間的部分，這樣我就不用一次又一次地寫。我也想兩個功能添加到資源字典：

1. 綁定列名和列值莫名其妙的東西（我不知道），使任何兩個列下拉框可以使用此資源字典。

2. 如果可能的話，我想在資源字典中添加一些邏輯，以便相同的資源字典可以用於任何數量的列的任何組合框。

我想有人能指引我正確的方向，如果有人做了過去這件事情，然後我可能會得到一些幫助的是，這是在問這個問題的另一種內涵。

如果我上面的問題沒有解決只使用xaml，那麼我也會高興地接受解決方案。

Answer 1

試試這個可能會對你有幫助。我剛編輯過組合框樣式。請單獨運行這段代碼。

XAML代碼

<Window.Resources> 
    <!--header text--> 
    <TextBlock x:Key="header1" Text="Index"></TextBlock> 
    <TextBlock x:Key="header2" Text="Name"></TextBlock> 
    <TextBlock x:Key="header3" Text="Symbol"></TextBlock> 

    <!--Toggle Button Template--> 
    <ControlTemplate x:Key="ComboBoxToggleButton" TargetType="ToggleButton"> 
     <Grid x:Name="gd"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition /> 
       <ColumnDefinition Width="30" /> 
      </Grid.ColumnDefinitions> 
      <Border x:Name="Border" SnapsToDevicePixels="True" Grid.ColumnSpan="2" Background="White" BorderBrush="LightGray" BorderThickness="1"/> 
      <Border x:Name="Boredr1" SnapsToDevicePixels="True" Grid.Column="0" Margin="1" Background="White" BorderBrush="LightGray" BorderThickness="0,0,1,0" /> 
      <Path x:Name="Arrow" SnapsToDevicePixels="True" Grid.Column="1" Fill="Black" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 0 0 L 6 6 L 12 0 Z"/> 
      <ContentPresenter Grid.Column="0" TextElement.Foreground="Orange"></ContentPresenter> 
     </Grid> 
     <ControlTemplate.Triggers> 
      <Trigger Property="ToggleButton.IsMouseOver" Value="True"> 
       <Setter TargetName="Border" Property="BorderBrush" Value="Black"/> 
       <Setter TargetName="Boredr1" Property="BorderBrush" Value="Black"/> 
      </Trigger> 
      <Trigger Property="ToggleButton.IsChecked" Value="True"> 
       <Setter TargetName="Arrow" Property="Data" Value="M 0 0 L 5 5 L 10 0"/> 
       <Setter TargetName="Arrow" Property="Fill" Value="White"/> 
       <Setter TargetName="Arrow" Property="Stroke" Value="Black"/> 
       <Setter TargetName="Arrow" Property="StrokeThickness" Value="1.5"/> 
      </Trigger> 
      <Trigger Property="IsEnabled" Value="False"> 
       <Setter TargetName="gd" Property="Visibility" Value="Visible"/> 
      </Trigger> 
     </ControlTemplate.Triggers> 
    </ControlTemplate> 

    <!--TextBox Template--> 
    <ControlTemplate x:Key="ComboBoxTextBox" TargetType="TextBox"> 
     <ScrollViewer x:Name="PART_ContentHost" Focusable="False" /> 
    </ControlTemplate> 

    <!--2 column combobox--> 
    <Style x:Key="2_Column_Cmb" TargetType="ComboBox"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="ComboBox"> 
        <Grid> 
         <ToggleButton Name="ToggleButton" Foreground="Black" Template="{StaticResource ComboBoxToggleButton}" Focusable="false" IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press"> 
         </ToggleButton> 
         <ContentPresenter Name="ContentSite" IsHitTestVisible="False" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Margin="3,3,23,3" VerticalAlignment="Center" HorizontalAlignment="Left" /> 
         <TextBox OverridesDefaultStyle="True" SelectionBrush="Gray" CaretBrush="Black" Margin="0,0,30,0" TextWrapping="NoWrap" x:Name="PART_EditableTextBox" FontFamily="Segoe UI Dark" Foreground="Black" Style="{x:Null}" Template="{StaticResource ComboBoxTextBox}" HorizontalAlignment="Left" Focusable="True" VerticalAlignment="Center" FontSize="15" Visibility="Hidden" IsReadOnly="{TemplateBinding IsReadOnly}"/> 
         <Popup Name="Popup" Grid.ColumnSpan="2" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True" Focusable="False" PopupAnimation="Slide"> 
          <Grid Name="DropDown" SnapsToDevicePixels="True" MaxWidth="{TemplateBinding ActualWidth}" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}"> 
           <Grid.ColumnDefinitions> 
            <ColumnDefinition></ColumnDefinition> 
            <ColumnDefinition></ColumnDefinition> 
           </Grid.ColumnDefinitions> 
           <Grid.RowDefinitions> 
            <RowDefinition Height="30"></RowDefinition> 
            <RowDefinition Height="Auto"></RowDefinition> 
           </Grid.RowDefinitions> 
           <Grid Background="LightGray" Grid.Row="0" Grid.Column="0"> 
            <TextBlock Text="{Binding Source={StaticResource header2},Path=Text}" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Black" FontFamily="Segoe Ui Dark" FontSize="15" ></TextBlock> 
           </Grid> 
           <Grid Background="LightGray" Grid.Row="0" Grid.Column="1"> 
            <TextBlock Text="{Binding Source={StaticResource header3},Path=Text}" Background="LightGray" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Black" FontFamily="Segoe Ui Dark" FontSize="15"></TextBlock> 
           </Grid> 
           <Border Grid.ColumnSpan="2" Grid.RowSpan="2" x:Name="DropDownBorder" SnapsToDevicePixels="True" Background="Transparent" MaxWidth="{TemplateBinding ActualWidth}" BorderThickness="1" BorderBrush="LightGray"/> 
           <ScrollViewer Grid.ColumnSpan="2" ScrollViewer.CanContentScroll="False" Grid.Row="1" SnapsToDevicePixels="True"> 
            <StackPanel IsItemsHost="True" Background="Transparent"> 
            </StackPanel> 
           </ScrollViewer> 
          </Grid> 
         </Popup> 
        </Grid> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsEditable" Value="true"> 
          <Setter Property="IsTabStop" Value="false"/> 
          <Setter TargetName="PART_EditableTextBox" Property="Background" Value="White"/> 
          <Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/> 
          <Setter TargetName="PART_EditableTextBox" Property="Foreground" Value="Black"/> 
          <Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/> 
         </Trigger> 
         <Trigger Property="HasItems" Value="false"> 
          <Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/> 
         </Trigger> 
         <Trigger Property="IsEnabled" Value="false"> 
          <Setter Property="IsTabStop" Value="false"/> 
          <Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/> 
          <Setter TargetName="PART_EditableTextBox" Property="Foreground" Value="Black"/> 
          <Setter TargetName="PART_EditableTextBox" Property="IsEnabled" Value="False"/> 
          <Setter TargetName="PART_EditableTextBox" Property="Background" Value="White"/> 
          <Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/> 
         </Trigger> 
         <Trigger Property="IsGrouping" Value="true"> 
          <Setter Property="ScrollViewer.CanContentScroll" Value="false"/> 
         </Trigger> 
         <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true"> 
          <Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
     <Style.Triggers> 
     </Style.Triggers> 
    </Style> 

    <!--3 column combobox--> 
    <Style x:Key="3_Column_Cmb" TargetType="ComboBox"> 
     <Setter Property="SnapsToDevicePixels" Value="true"/> 
     <Setter Property="OverridesDefaultStyle" Value="true"/> 
     <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/> 
     <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"/> 
     <Setter Property="Height" Value="40"/> 
     <Setter Property="MinWidth" Value="120"/> 
     <Setter Property="MinHeight" Value="20"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="ComboBox"> 
        <Grid> 
         <ToggleButton Name="ToggleButton" Foreground="Black" Template="{StaticResource ComboBoxToggleButton}" Focusable="false" IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press"> 
         </ToggleButton> 
         <ContentPresenter Name="ContentSite" IsHitTestVisible="False" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Margin="3,3,23,3" VerticalAlignment="Center" HorizontalAlignment="Left" /> 
         <TextBox OverridesDefaultStyle="True" SelectionBrush="Gray" CaretBrush="Black" Margin="0,0,30,0" TextWrapping="NoWrap" x:Name="PART_EditableTextBox" FontFamily="Segoe UI Dark" Foreground="Black" Style="{x:Null}" Template="{StaticResource ComboBoxTextBox}" HorizontalAlignment="Left" Focusable="True" VerticalAlignment="Center" FontSize="15" Visibility="Hidden" IsReadOnly="{TemplateBinding IsReadOnly}"/> 
         <Popup Name="Popup" Grid.ColumnSpan="2" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True" Focusable="False" PopupAnimation="Slide"> 
          <ContentControl Name="DropDown" SnapsToDevicePixels="True" MaxWidth="{TemplateBinding ActualWidth}" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}"> 
           <Grid> 
            <Grid.ColumnDefinitions> 
             <ColumnDefinition></ColumnDefinition> 
             <ColumnDefinition></ColumnDefinition> 
             <ColumnDefinition></ColumnDefinition> 
            </Grid.ColumnDefinitions> 
            <Grid.RowDefinitions> 
             <RowDefinition Height="30"></RowDefinition> 
             <RowDefinition Height="Auto"></RowDefinition> 
            </Grid.RowDefinitions> 
            <Grid Background="LightGray" Grid.Row="0" Grid.Column="0"> 
             <TextBlock Text="{Binding Source={StaticResource header1},Path=Text}" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Black" FontFamily="Segoe Ui Dark" FontSize="15" ></TextBlock> 
            </Grid> 
            <Grid Background="LightGray" Grid.Row="0" Grid.Column="1"> 
             <TextBlock Text="{Binding Source={StaticResource header2},Path=Text}" Background="LightGray" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Black" FontFamily="Segoe Ui Dark" FontSize="15"></TextBlock> 
            </Grid> 
            <Grid Background="LightGray" Grid.Row="0" Grid.Column="2"> 
             <TextBlock Text="{Binding Source={StaticResource header3},Path=Text}" Background="LightGray" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Black" FontFamily="Segoe Ui Dark" FontSize="15"></TextBlock> 
            </Grid> 
            <Border Grid.ColumnSpan="3" Grid.RowSpan="2" x:Name="DropDownBorder" SnapsToDevicePixels="True" Background="Transparent" MaxWidth="{TemplateBinding ActualWidth}" BorderThickness="1" BorderBrush="LightGray"/> 
            <ScrollViewer Grid.ColumnSpan="3" ScrollViewer.CanContentScroll="False" Grid.Row="1" Margin="0,0,0,0" SnapsToDevicePixels="True"> 
             <StackPanel IsItemsHost="True" Background="Transparent"> 
             </StackPanel> 
            </ScrollViewer> 
           </Grid> 
          </ContentControl> 
         </Popup> 
        </Grid> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsEditable" Value="true"> 
          <Setter Property="IsTabStop" Value="false"/> 
          <Setter TargetName="PART_EditableTextBox" Property="Background" Value="White"/> 
          <Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/> 
          <Setter TargetName="PART_EditableTextBox" Property="Foreground" Value="Black"/> 
          <Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/> 
         </Trigger> 
         <Trigger Property="HasItems" Value="false"> 
          <Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/> 
         </Trigger> 
         <Trigger Property="IsEnabled" Value="false"> 
          <Setter Property="IsTabStop" Value="false"/> 
          <Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/> 
          <Setter TargetName="PART_EditableTextBox" Property="Foreground" Value="Black"/> 
          <Setter TargetName="PART_EditableTextBox" Property="IsEnabled" Value="False"/> 
          <Setter TargetName="PART_EditableTextBox" Property="Background" Value="White"/> 
          <Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/> 
         </Trigger> 
         <Trigger Property="IsGrouping" Value="true"> 
          <Setter Property="ScrollViewer.CanContentScroll" Value="false"/> 
         </Trigger> 
         <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true"> 
          <Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
     <Style.Triggers> 
     </Style.Triggers> 
    </Style> 

    <!--combobox item style--> 
    <Style x:Key="Column_CmbItem" TargetType="ComboBoxItem"> 
     <Setter Property="SnapsToDevicePixels" Value="True"/> 
     <Setter Property="OverridesDefaultStyle" Value="True"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="ComboBoxItem"> 
        <Grid x:Name="Border" Grid.ColumnSpan="2" Margin="1,0,1,1" Background="White"> 
         <ContentPresenter></ContentPresenter> 
        </Grid> 
        <ControlTemplate.Triggers> 
         <Trigger Property="ComboBoxItem.IsSelected" Value="True"> 
          <Setter TargetName="Border" Property="Background" Value="Gray"></Setter> 
         </Trigger> 
         <Trigger Property="ComboBoxItem.IsMouseOver" Value="True"> 
          <Setter TargetName="Border" Property="Background" Value="LightBlue"></Setter> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

</Window.Resources> 

你可以寫在資源此組合框的DataTemplate also..so您可以使用下拉框datatempalate多個再寄一次沒有寫在資源。

<Grid> 
    <ComboBox x:Name="Combobox" Margin="50,0,0,0" IsEditable="True" HorizontalAlignment="Left" IsTextSearchEnabled="True" TextSearch.TextPath="symbol" ItemsSource="{Binding cmb }" Style="{StaticResource 2_Column_Cmb}" Height="30" ItemContainerStyle="{StaticResource Column_CmbItem}" Width="200" Tag="Item1"> 
     <ComboBox.ItemTemplate> 
      <DataTemplate> 
       <Grid Background="Transparent" SnapsToDevicePixels="True"> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition></ColumnDefinition> 
         <ColumnDefinition></ColumnDefinition> 
        </Grid.ColumnDefinitions> 
        <TextBlock Text="{Binding name}" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="0" FontSize="15" TextTrimming="CharacterEllipsis" Foreground="Black" /> 
        <TextBlock Text="{Binding symbol}" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="20" Foreground="Black"/> 
       </Grid> 
      </DataTemplate> 
     </ComboBox.ItemTemplate> 
    </ComboBox> 

    <ComboBox x:Name="Combobox1" Margin="0,0,50,0" HorizontalAlignment="Right" IsEditable="True" IsTextSearchEnabled="True" TextSearch.TextPath="symbol" ItemsSource="{Binding cmb }" Style="{StaticResource 3_Column_Cmb}" Height="30" ItemContainerStyle="{StaticResource Column_CmbItem}" Width="200" Tag="Item1"> 
     <ComboBox.ItemTemplate> 
      <DataTemplate> 
       <Grid Background="Transparent" SnapsToDevicePixels="True"> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition></ColumnDefinition> 
         <ColumnDefinition></ColumnDefinition> 
         <ColumnDefinition></ColumnDefinition> 
        </Grid.ColumnDefinitions> 
        <TextBlock Text="{Binding index}" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="0" FontSize="15" TextTrimming="CharacterEllipsis" Foreground="Black" /> 
        <TextBlock Text="{Binding name}" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="1" FontSize="15" TextTrimming="CharacterEllipsis" Foreground="Black" /> 
        <TextBlock Text="{Binding symbol}" Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="20" Foreground="Black"/> 
       </Grid> 
      </DataTemplate> 
     </ComboBox.ItemTemplate> 
    </ComboBox> 
</Grid> 

C＃代碼

InitializeComponent(); 
    List<ComboboxData> cmb = new List<ComboboxData>(); 
    cmb.Add(new ComboboxData("1.","Tidle", "~")); 
    cmb.Add(new ComboboxData("2.", "Exclamation", "!")); 
    cmb.Add(new ComboboxData("3.", "Ampersat", "@"));   
    cmb.Add(new ComboboxData("4.","Ampersand", "&")); 
    cmb.Add(new ComboboxData("5.","Dollar", "$")); 
    Combobox.ItemsSource = cmb; 
    Combobox1.ItemsSource = cmb; 

public class ComboboxData 
{ 
    public string index { get; set; } 
    public string name { get; set; } 
    public string symbol { get; set; } 
    public ComboboxData(string index,string name,string symbol) 
    { 
     this.index = index; 
     this.name = name; 
     this.symbol = symbol; 
    } 
} 

同樣可以爲4列，5列也可以編輯模板。

輸出