Combox自定义样式

 

 

 

<Style x:Key="SimpleComboBox" TargetType="{x:Type ComboBox}">
            <Setter Property="SnapsToDevicePixels" Value="true"/>
            <Setter Property="ItemContainerStyle" Value="{DynamicResource SimpleComboBoxItem}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ComboBox}">
                        <Border >
                            <Border.Background>

                                <ImageBrush ImageSource="Styles/Images/LatestReleases/button_sortby_normalmode_woutfont.png"></ImageBrush>
                            </Border.Background>
                            <Grid>
                                <!-- The ToggleButton is databound to the ComboBox itself to toggle IsDropDownOpen -->
                                <ToggleButton Width="35" Grid.Column="2" x:Name="ToggleButton" HorizontalAlignment="Right" Background="Transparent"
                                          Focusable="false" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press">
                                    <ToggleButton.Style>
                                        <Style TargetType="ToggleButton">
                                            <Setter Property="Padding" Value="0"/>
                                            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
                                            <Setter Property="Template">
                                                <Setter.Value>
                                                    <ControlTemplate TargetType="ToggleButton">
                                                        <Grid Background="Transparent"/>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Style>
                                    </ToggleButton.Style>
                                </ToggleButton>

                                <ContentPresenter HorizontalAlignment="Left" Margin="10,3,23,3" x:Name="ContentSite" VerticalAlignment="Center" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" IsHitTestVisible="False"/>

                                <!-- The TextBox must be named PART_EditableTextBox or ComboBox will not recognize it -->
                                <TextBox Visibility="Hidden" Template="{DynamicResource ComboBoxTextBox}" HorizontalAlignment="Left" Margin="3,3,23,3"
                                         x:Name="PART_EditableTextBox" Style="{x:Null}" VerticalAlignment="Center" Focusable="True"
                                         Background="Transparent" IsReadOnly="{TemplateBinding IsReadOnly}" FontFamily="Segoe WP"/>

                                <!-- The Popup shows the list of items in the ComboBox. IsOpen is databound to IsDropDownOpen which is toggled via the ComboBoxToggleButton -->
                                <Popup IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom" x:Name="Popup" Focusable="False" AllowsTransparency="True" PopupAnimation="Slide">
                                    <Grid MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding ActualWidth}" x:Name="DropDown" SnapsToDevicePixels="True">
                                        <Border x:Name="DropDownBorder" Background="{DynamicResource WindowBackgroundBrush}" BorderBrush="{DynamicResource SolidBorderBrush}" BorderThickness="1"/>
                                        <ScrollViewer Margin="0,3,2,2" Style="{DynamicResource SimpleScrollViewer}" SnapsToDevicePixels="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" CanContentScroll="True">

                                            <!-- The StackPanel is used to display the children by setting IsItemsHost to be True -->
                                            <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained"/>

                                        </ScrollViewer>
                                    </Grid>
                                </Popup>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <!-- This forces the DropDown to have a minimum size if it is empty -->
                            <Trigger Property="HasItems" Value="false">
                                <Setter Property="MinHeight" Value="95" TargetName="DropDownBorder"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="{DynamicResource DisabledForegroundBrush}"/>
                            </Trigger>
                            <Trigger Property="IsGrouping" Value="true">
                                <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                            </Trigger>
                            <Trigger Property="AllowsTransparency" SourceName="Popup" Value="true">
                                <Setter Property="CornerRadius" Value="4" TargetName="DropDownBorder"/>
                                <Setter Property="Margin" Value="0,2,0,0" TargetName="DropDownBorder"/>
                            </Trigger>
                            <Trigger Property="IsEditable" Value="true">
                                <Setter Property="IsTabStop" Value="false"/>
                                <Setter Property="Visibility" Value="Visible" TargetName="PART_EditableTextBox"/>
                                <Setter Property="Visibility" Value="Hidden" TargetName="ContentSite"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <!-- Simple ComboBoxItem - This is used for each item inside of the ComboBox. You can change the selected color of each item below-->
        <Style x:Key="SimpleComboBoxItem" TargetType="{x:Type ComboBoxItem}">
            <Setter Property="SnapsToDevicePixels" Value="true"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Height" Value="35"/>
            <Setter Property="Padding" Value="10,2,2,2"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ComboBoxItem}">
                        <Grid SnapsToDevicePixels="true" Name="Grid" Height="{TemplateBinding Height}">
                            <Grid.Background>
                                <ImageBrush ImageSource="Styles/Images/LatestReleases/button_sortby_menu_normalmode_woutfont.png" />
                            </Grid.Background>
                            <ContentPresenter Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <!-- Change IsHighlighted SelectedBackgroundBrush to set the selection color for the items -->
                            <Trigger Property="IsHighlighted" Value="true">
                                <Setter Property="Background" TargetName="Grid">
                                    <Setter.Value>
                                        <ImageBrush ImageSource="Styles/Images/LatestReleases/button_sortby_menu_clickmode_woutfont.png" />
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsSelected" Value="true">
                                <Setter Property="Background" TargetName="Grid">
                                    <Setter.Value>
                                        <ImageBrush ImageSource="Styles/Images/LatestReleases/button_sortby_menu_clickmode_woutfont.png" />
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

posted @ 2012-09-11 17:07  静艳  阅读(1404)  评论(0编辑  收藏  举报