wpf中的自定義組合框應用程序

Question

Im新的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> 

此輸出像textbox.Please作品幫我傢伙！

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組合框的完整樣式。定製也很容易。

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>