wpfのカスタムコンボボックス

Question

新しいWPFアプリケーションです。私はこのイメージのように私のコンボボックスをカスタマイズする必要があります。

私はtextbox.Pleaseのようなこの出力の作品は私の男を助ける http://www.eidias.com/Blog/2012/2/20/customizing-wpf-combo-box-style

<Window x:Class="win.Window1" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="Window1" Height="300" Width="300" Background="Red"> 
    <Window.Resources> 
     <ControlTemplate x:Key="CustomToggleButton" TargetType="ToggleButton"> 
      <Grid> 
       <Border Name="Border" /> 
       <Border Name="SmallBorder" /> 
       <Path Name="Arrow" /> 
      </Grid> 
     </ControlTemplate> 
     <Style TargetType="{x:Type ComboBoxItem}"> 
      <Setter Property="FrameworkElement.OverridesDefaultStyle" Value="True" /> 
      <Setter Property="Control.Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type ComboBoxItem}"> 
         <Border> 
          <ContentPresenter /> 
         </Border> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
     <Style TargetType="{x:Type ComboBox}"> 
      <Setter Property="FrameworkElement.OverridesDefaultStyle" Value="True" /> 
      <Setter Property="Control.Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="ComboBox"> 
         <Grid> 
          <ToggleButton Template="{StaticResource CustomToggleButton}" /> 
          <ContentPresenter /> 
          <TextBox /> 
          <Popup> 
           <Grid> 
            <Border> 
             <ScrollViewer> 
              <ItemsPresenter /> 
             </ScrollViewer> 
            </Border> 
           </Grid> 
          </Popup> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </Window.Resources> 
    <Grid> 
     <ComboBox Grid.Column="1" Height="40" Width="200" > 
      <ComboBoxItem Name="item1">item1</ComboBoxItem> 
      <ComboBoxItem Name="item2">item2</ComboBoxItem> 
      <ComboBoxItem Name="item3">item3</ComboBoxItem> 
     </ComboBox> 
    </Grid> 
</Window> 

この例を試してみました！

Answer 1

私はこのフォーマットも好きで、これを再現することにしました。以下のXAMLをご覧ください。それはあなたがしようとしたものを誰か...

<Window x:Class="ComboStyle.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="MainWindow" Height="350" Width="525"> 

<Window.Resources> 
    <ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}"> 
     <Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition /> 
       <ColumnDefinition Width="20" /> 
      </Grid.ColumnDefinitions> 
      <Border 
        x:Name="Border" 
        Grid.ColumnSpan="2" 
        CornerRadius="0" 
        Background="#FF3F3F3F" 
        BorderBrush="#FF97A0A5" 
        BorderThickness="1" /> 
      <Border 
        Grid.Column="0" 
        CornerRadius="0" 
        Margin="1" 
        Background="#FF3F3F3F" 
        BorderBrush="#FF97A0A5" 
        BorderThickness="0,0,1,0" /> 
      <Path 
        x:Name="Arrow" 
        Grid.Column="1"  
        Fill="White" 
        HorizontalAlignment="Center" 
        VerticalAlignment="Center" 
        Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z" 
       /> 
     </Grid> 
     <!--<ControlTemplate.Triggers> 
      <Trigger Property="ToggleButton.IsMouseOver" Value="true"> 
       <Setter TargetName="Border" Property="Background" Value="#808080" /> 
      </Trigger> 
      <Trigger Property="ToggleButton.IsChecked" Value="true"> 
       <Setter TargetName="Border" Property="Background" Value="#E0E0E0" /> 
      </Trigger> 
      <Trigger Property="IsEnabled" Value="False"> 
       <Setter TargetName="Border" Property="Background" Value="#EEEEEE" /> 
       <Setter TargetName="Border" Property="BorderBrush" Value="#AAAAAA" /> 
       <Setter Property="Foreground" Value="#888888"/> 
       <Setter TargetName="Arrow" Property="Fill" Value="#888888" /> 
      </Trigger> 
     </ControlTemplate.Triggers>--> 
    </ControlTemplate> 

    <ControlTemplate x:Key="ComboBoxTextBox" TargetType="{x:Type TextBox}"> 
     <Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" /> 
    </ControlTemplate> 

    <Style x:Key="{x:Type ComboBox}" TargetType="{x:Type ComboBox}"> 
     <Setter Property="SnapsToDevicePixels" Value="true"/> 
     <Setter Property="OverridesDefaultStyle" Value="true"/> 
     <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/> 
     <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/> 
     <Setter Property="ScrollViewer.CanContentScroll" Value="true"/> 
     <Setter Property="MinWidth" Value="120"/> 
     <Setter Property="MinHeight" Value="20"/> 
     <Setter Property="Foreground" Value="White"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type ComboBox}"> 
        <Grid> 
         <ToggleButton 
          Name="ToggleButton" 
          Template="{StaticResource ComboBoxToggleButton}" 
          Grid.Column="2" 
          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 x:Name="PART_EditableTextBox" 
          Style="{x:Null}" 
          Template="{StaticResource ComboBoxTextBox}" 
          HorizontalAlignment="Left" 
          VerticalAlignment="Center" 
          Margin="3,3,23,3" 
          Focusable="True" 
          Background="#FF3F3F3F" 
          Foreground="Green" 
          Visibility="Hidden" 
          IsReadOnly="{TemplateBinding IsReadOnly}"/> 
         <Popup 
          Name="Popup" 
          Placement="Bottom" 
          IsOpen="{TemplateBinding IsDropDownOpen}" 
          AllowsTransparency="True" 
          Focusable="False" 
          PopupAnimation="Slide"> 

          <Grid Name="DropDown" 
           SnapsToDevicePixels="True"     
           MinWidth="{TemplateBinding ActualWidth}" 
           MaxHeight="{TemplateBinding MaxDropDownHeight}"> 
           <Border 
           x:Name="DropDownBorder" 
           Background="#FF3F3F3F" 

           BorderThickness="1" 
           BorderBrush="#888888"/> 
           <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True"> 
            <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" /> 
           </ScrollViewer> 
          </Grid> 
         </Popup> 
        </Grid> 
        <ControlTemplate.Triggers> 
         <Trigger Property="HasItems" Value="false"> 
          <Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/> 
         </Trigger> 
         <Trigger Property="IsEnabled" Value="false"> 
          <Setter Property="Foreground" Value="#888888"/> 
         </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="CornerRadius" Value="0"/> 
          <Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0"/> 
         </Trigger> 
         <Trigger Property="IsEditable" Value="true"> 
          <Setter Property="IsTabStop" Value="false"/> 
          <Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/> 
          <Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
     <Style.Triggers> 
     </Style.Triggers> 
    </Style> 

    <!-- SimpleStyles: ComboBoxItem --> 
    <Style x:Key="{x:Type ComboBoxItem}" TargetType="{x:Type ComboBoxItem}"> 
     <Setter Property="SnapsToDevicePixels" Value="true"/> 
     <Setter Property="Foreground" Value="White"/> 
     <Setter Property="OverridesDefaultStyle" Value="true"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type ComboBoxItem}"> 
        <Border Name="Border" 
           Padding="2" 
           SnapsToDevicePixels="true"> 
         <ContentPresenter /> 
        </Border> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsHighlighted" Value="true"> 
          <Setter TargetName="Border" Property="Background" Value="#FF4F4F4F"/> 
         </Trigger> 
         <Trigger Property="IsEnabled" Value="false"> 
          <Setter Property="Foreground" Value="#888888"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</Window.Resources> 


<Grid> 
    <Border Padding="10" Background="#FF3F3F3F"> 
     <ComboBox Grid.Column="1" Height="30" Width="250" > 
      <ComboBoxItem Name="Item1">Item1</ComboBoxItem> 
      <ComboBoxItem Name="Item2">Item2</ComboBoxItem> 
      <ComboBoxItem Name="Item3">Item3</ComboBoxItem> 
      <ComboBoxItem Name="Item4">Item4</ComboBoxItem> 
      <ComboBoxItem Name="Item5">Item5</ComboBoxItem> 
      <ComboBoxItem Name="Item6">Item6</ComboBoxItem> 
     </ComboBox>   
    </Border> 

</Grid> 

Answer 2

は、このリンクをチェックアウト：

http://www.eidias.com/Blog/2012/2/20/customizing-wpf-combo-box-style

これは、カスタムコンボボックスを作成する方法のコード例を持つブログです。彼が作成しているカスタムコンボボックスは、必要なものと非常によく似ています。だから私はこれがあなたにとってとても役に立つと思う。

Answer 3

ここには、WPF ComboBoxの完全なスタイルがあります。カスタマイズも簡単です。

http://www.wpfhelper.com/index.php/styles-in-wpf/combobox/15-combobox-style-in-wpf

コードはので、私はここでそれらをすべて掲載しませんかなり長いです。ただし、コンボボックスの基本スタイルは次のとおりです。

<Style TargetType="{x:Type ComboBox">   
    <Setter Property="Foreground" Value="Gray" /> 
    <Setter Property="BorderBrush" Value="Gray" /> 
    <Setter Property="Background" Value="White" /> 
    <Setter Property="SnapsToDevicePixels" Value="true"/> 
    <Setter Property="OverridesDefaultStyle" Value="true"/> 
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/> 
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/> 
    <Setter Property="ScrollViewer.CanContentScroll" Value="true"/> 
    <Setter Property="FontSize" Value="16" /> 
    <Setter Property="FontWeight" Value="Bold" /> 
    <Setter Property="MinWidth" Value="50"/> 
    <Setter Property="MinHeight" Value="32"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="ComboBox"> 
       <Grid> 
        <ToggleButton 
          Name="ToggleButton" 
          BorderBrush="{TemplateBinding BorderBrush}" 
          Background="{TemplateBinding Background}" 
         Foreground="{TemplateBinding Foreground}" 
          Style="{StaticResource ComboBoxToggleButton}" 
          Grid.Column="2" 
          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="10,3,30,3" 
          VerticalAlignment="Center" 
          HorizontalAlignment="Center" /> 
        <TextBox x:Name="PART_EditableTextBox" 
          Style="{x:Null}" 
          Template="{StaticResource ComboBoxTextBox}" 
          HorizontalAlignment="Center" 
          VerticalAlignment="Center" 
          Margin="3,3,23,3" 
          Focusable="True"        
          Visibility="Hidden" 
          IsReadOnly="{TemplateBinding IsReadOnly}"/> 
        <Popup 
          Name="Popup" 
          Placement="Bottom" 
          IsOpen="{TemplateBinding IsDropDownOpen}" 
          AllowsTransparency="True" 
          Focusable="False" 
          PopupAnimation="Slide"> 
         <Grid 
           Name="DropDown" 
           SnapsToDevicePixels="True"    
           MinWidth="{TemplateBinding ActualWidth}" 
           MaxHeight="{TemplateBinding MaxDropDownHeight}"> 
          <Border 
            x:Name="DropDownBorder" 
            Background="White" 
            BorderThickness="2" 
            BorderBrush="Gray"/> 
          <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True"> 
           <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" /> 
          </ScrollViewer> 
         </Grid> 
        </Popup> 

       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="HasItems" Value="false"> 
         <Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/> 
        </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="CornerRadius" Value="0"/> 
         <Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0"/> 
        </Trigger> 
        <Trigger Property="IsEditable" Value="true"> 
         <Setter Property="IsTabStop" Value="false"/> 
         <Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/> 
         <Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
    <Style.Triggers> 
    </Style.Triggers> 
</Style>