wpfアプリケーションのカスタムコンボボックス

Question

WPFアプリケーションは初めてです。この画像のようにコンボボックスをカスタマイズする必要があります。

私はこの例を試しました 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

コードは非常に長いので、ここにすべてを掲載しません。ただし、基本のComboBoxスタイルは次のとおりです。

<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>