Élégamment remplacer le style de la zone de liste déroulante du ToggleButton dans WPF

J'ai une question concernant la façon d'élégance remplacer l'arbitraire d'un élément profondément à l'intérieur d'un contrôle visuel de l'arbre. J'ai aussi tenté de le résoudre en quelques manières différentes, mais j'ai rencontré plusieurs problèmes avec chaque. Habituellement, lorsque j'essaie de trois chemins différents et ne parviennent pas à chacun, j'aller en bas, prendre un café, et demandez à quelqu'un de plus intelligent que moi. Alors je suis ici.

Détails:

Je veux aplatir le style d'une liste déroulante afin de ne pas attirer l'attention sur lui. Je veux qu'il soit similaire à celui de Windows.Les formulaires.Zone de liste déroulante du FlatStyle je veux regarder la même chose sur Windows 7 et XP.

Surtout, je veux changer l'apparence d'une zone de liste déroulante du ToggleButton.

Je pouvais Mélange et de déchirer le modèle de contrôle de tripes et de le modifier manuellement. Qui n'a pas l'air très appétissant pour moi.

J'ai essayé d'utiliser un style de remplacer le ToggleButton de l'arrière-plan, mais il s'avère que l'ensemble de la zone de liste déroulante de contrôle est en fait une façade pour un ToggleButton.

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="ComboBoxExpiriment2.MainWindow"
x:Name="Window"
xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Classic" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Title="MainWindow"
Width="204" Height="103">
<Grid x:Name="LayoutRoot">
    <ComboBox HorizontalAlignment="Left" Margin="32,26.723,0,0" Width="120" VerticalAlignment="Top" Height="21.277">
    <ComboBox.Style>
      <Style>
        <Setter Property="ToggleButton.Background" Value="Green" />
      </Style>
    </ComboBox.Style>
    </ComboBox>
</Grid>

Donc j'ai abandonné et a arraché à l'aide d'un Mélange. J'ai trouvé que c'est en fait un Style appelé ComboBoxTransparentButtonStyle avec un type de cible de ToggleButton. Le style définit un ControlTemplate qui utilise un DockPanel qui a une "Microsoft_Windows_Themes:ClassicBorderDecorator de type" jeu de la droite, et c'est ce que nous sommes en train d'essayer de les contrôler. (Êtes-vous avec moi pour l'instant?)
Voici le pic:

Élégamment remplacer le style de la zone de liste déroulante du ToggleButton dans WPF

<Style x:Key="ComboBoxTransparentButtonStyle" TargetType="{x:Type ToggleButton}">
                <Setter Property="MinWidth" Value="0"/>
                <Setter Property="MinHeight" Value="0"/>
                <Setter Property="Width" Value="Auto"/>
                <Setter Property="Height" Value="Auto"/>
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="BorderBrush" Value="{x:Static Microsoft_Windows_Themes:ClassicBorderDecorator.ClassicBorderBrush}"/>
                <Setter Property="BorderThickness" Value="2"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ToggleButton}">
                            <DockPanel SnapsToDevicePixels="true" Background="{TemplateBinding Background}" LastChildFill="false">
                                <Microsoft_Windows_Themes:ClassicBorderDecorator x:Name="Border" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" DockPanel.Dock="Right" Background="Green" BorderBrush="{TemplateBinding BorderBrush}" BorderStyle="None" BorderThickness="{TemplateBinding BorderThickness}">
                                    <Path Fill="{TemplateBinding Foreground}" HorizontalAlignment="Center" VerticalAlignment="Center" Data="{StaticResource DownArrowGeometry}"/>
                                </Microsoft_Windows_Themes:ClassicBorderDecorator>
                            </DockPanel>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsChecked" Value="true">
                                    <Setter Property="BorderStyle" TargetName="Border" Value="AltPressed"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}"/>
                    </Trigger>
                </Style.Triggers>
            </Style>

Arg. N'est-ce pas WPF une explosion?

J'ai donc extrait le style ComboBoxTransparentButtonStyle et a chuté dans un autre projet de l'application.les ressources. Le problème est que je ne peux pas appliquer ce style à un ComboBox parce que le style, j'ai extrait a une targetType de ToggleButton, de sorte que le TargeTypes ne correspondent pas.

tl;dr comment voulez-vous faire ça?

OriginalL'auteur | 2009-11-25

  1. 3

    Il n'y a pas une solution élégante pour cette. Le meilleur que vous pouvez faire est de remplacer le style pour l'ensemble de la zone de liste déroulante de sorte que vous pouvez changer le style qu'il définit pour le ToggleButton.

    Vous pouvez utiliser le Mélange pour obtenir les styles, cependant que probabliy n'est pas le moyen le plus facile. Si vous avez le Mélange est installé, passez à "[Program files ou lorsque le Mélange est installé]\SystemThemes\WPF\areo.normalcolor.xaml".

    OriginalL'auteur Steven

  2. 2

    Une Solution De Travail

    Salut, ce style qui répond à vos besoins, n'hésitez pas à modifier ce que vous avez besoin:

        <SolidColorBrush x:Key="WindowBackgroundBrush" Color="White" />
<SolidColorBrush x:Key="MainColor" Color="DeepSkyBlue"/>
<SolidColorBrush x:Key="MainColorLight" Color="LightSkyBlue"/>
<SolidColorBrush x:Key="MainColorDark" Color="#00A7DF"/>
<SolidColorBrush x:Key="BorderMainBrush" Color="LightGray"/>
<SolidColorBrush x:Key="BorderDarkMainBrush" Color="#C0C0C0"/>
<SolidColorBrush x:Key="BackgroundGrayDark" Color="#FFEFEFEF"/>
<SolidColorBrush x:Key="BackgroundGrayLight" Color="#F5F5F5"/>
<SolidColorBrush x:Key="ForegroundDisabledBrush" Color="DimGray"/>
<SolidColorBrush x:Key="ForegroundBrush" Color="Black"/>
<LinearGradientBrush x:Key="FormBackgroundBrush"
EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFFD" Offset="0.31" />
<GradientStop Color="#FFF8F8F8" Offset="1" />
</LinearGradientBrush>
<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="ToggleButton">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border" SnapsToDevicePixels="True" Grid.ColumnSpan="2" Background="{DynamicResource BackgroundGrayDark}" BorderBrush="{DynamicResource BorderDarkMainBrush}" BorderThickness="1"  />
<Border x:Name="Border2" Grid.Column="0" SnapsToDevicePixels="True" Margin="1" Background="{StaticResource WindowBackgroundBrush}" BorderBrush="{DynamicResource BorderDarkMainBrush}" BorderThickness="0,0,1,0" />
<Path x:Name="Arrow" Grid.Column="1" Data="M 0 0 L 4 4 L 8 0 Z" Fill="DimGray" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsMouseOver" Value="true">
<Setter Property="Background" TargetName="Border" Value="{DynamicResource MainColor}" />
<Setter Property="BorderBrush" TargetName="Border" Value="{DynamicResource MainColor}" />
<Setter Property="BorderBrush" TargetName="Border2" Value="{DynamicResource MainColor}" />
<Setter Property="Fill" TargetName="Arrow" Value="White" />
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="true">
<Setter Property="Background" TargetName="Border" Value="{DynamicResource MainColorDark}" />
<Setter Property="BorderBrush" TargetName="Border" Value="{DynamicResource MainColorDark}" />
<Setter Property="BorderBrush" TargetName="Border2" Value="{DynamicResource MainColorDark}" />
<Setter Property="Fill" TargetName="Arrow" Value="White" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" TargetName="Border" Value="{DynamicResource BackgroundGrayLight}" />
<Setter Property="BorderBrush" TargetName="Border" Value="{StaticResource BorderMainBrush}" />
<Setter Property="Foreground" Value="{StaticResource ForegroundDisabledBrush}" />
</Trigger>
<DataTrigger Binding="{Binding IsKeyboardFocusWithin, RelativeSource={RelativeSource Mode=TemplatedParent}, Mode=OneWay}" Value="True">
<Setter Property="Background" TargetName="Border" Value="{DynamicResource MainColorLight}" />
<Setter Property="BorderBrush" TargetName="Border" Value="{DynamicResource MainColorLight}" />
<Setter Property="BorderBrush" TargetName="Border2" Value="{DynamicResource MainColorLight}" />
<Setter Property="Fill" TargetName="Arrow" Value="White" />
</DataTrigger >
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="ComboBoxTextBox" TargetType="TextBox">
<Border x:Name="PART_ContentHost" Background="{TemplateBinding Background}" Focusable="False" />
</ControlTemplate>
<Style TargetType="ComboBox">
<Setter Property="Validation.ErrorTemplate" Value="{x:Null}" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="IsEditable" Value="True"/>
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.CanContentScroll" Value="true" />
<Setter Property="Margin" Value="2" />
<Setter Property="MinHeight" Value="20" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ToggleButton x:Name="ToggleButton" Grid.Column="2" ClickMode="Press" Focusable="false"
IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
Template="{StaticResource ComboBoxToggleButton}"/>
<ContentPresenter Margin="3,3,23,3" Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
HorizontalAlignment="Left" IsHitTestVisible="False" x:Name="ContentSite"
VerticalAlignment="Center" />
<TextBox Style="{x:Null}" x:Name="PART_EditableTextBox" Margin="3,3,23,3" Background="Transparent"
Focusable="True" HorizontalAlignment="Left" IsReadOnly="{TemplateBinding IsReadOnly}"
Template="{StaticResource ComboBoxTextBox}" VerticalAlignment="Center" Visibility="Hidden" />
<Popup AllowsTransparency="True" Focusable="False" IsOpen="{TemplateBinding IsDropDownOpen}" x:Name="Popup" Placement="Bottom" PopupAnimation="Fade">
<Grid MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding ActualWidth}" x:Name="DropDown" SnapsToDevicePixels="True">
<Border x:Name="DropDownBorder" Background="White" BorderBrush="{StaticResource BorderDarkMainBrush}" BorderThickness="1" CornerRadius="0" />
<ScrollViewer Margin="2" SnapsToDevicePixels="True">
<StackPanel KeyboardNavigation.DirectionalNavigation="Contained" IsItemsHost="True" TextBlock.Foreground="Black" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasItems" Value="false">
<Setter Property="MinHeight" TargetName="DropDownBorder" Value="95" />
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false" />
</Trigger>
<Trigger Property="IsEditable" Value="true">
<Setter Property="IsTabStop" Value="false" />
<Setter Property="Visibility" TargetName="PART_EditableTextBox" Value="Visible" />
<Setter Property="Visibility" TargetName="ContentSite" Value="Hidden" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
</Style.Triggers>
</Style>

    Note le DataTrigger partie à l'intérieur du bouton à bascule de style, il s'accroche à son basé sur un modèle du parent IsKeyboardFocusWithin propriété istead de IsFocused bien, parce que le dernier ne fonctionnera pas si vous définissez la ComboBox.IsEditable à True comme je l'ai fait dans ce style.

    <DataTrigger Binding="{Binding IsKeyboardFocusWithin, RelativeSource={RelativeSource Mode=TemplatedParent}, Mode=OneWay}" Value="True">
<Setter Property="Background" TargetName="Border" Value="{DynamicResource MainColorLight}" />
<Setter Property="BorderBrush" TargetName="Border" Value="{DynamicResource MainColorLight}" />
<Setter Property="BorderBrush" TargetName="Border2" Value="{DynamicResource MainColorLight}" />
<Setter Property="Fill" TargetName="Arrow" Value="White" />
</DataTrigger >

    OriginalL'auteur Mohammed A. Fadil