ComboBox 是 Focused 改变 Border
ComboBox is Focused change Border
谁能帮我在 IsFocus=True 时让这个 Combobox 改变 borderthickness?
我在过去两个小时内尝试了几种不同的方法,但似乎无法正常工作。
我知道我必须设置触发器...
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="BorderThickness" Value="2,2,2,2"/>
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
但似乎不知道在哪里设置它们。
也忽略颜色。它们都是在 运行 时间或用户更改时设置的。
如有任何帮助,我们将不胜感激。
<SolidColorBrush x:Name="BrushCBForeGround" x:Key="KeyBrushCBForeGround" Color="Orange"/>
<SolidColorBrush x:Name="BrushCBBorder" x:Key="KeyBrushCBBorder" Color="orange"/>
<SolidColorBrush x:Name="BrushCBBorderBG" x:Key="KeyBrushCBBorderBG" Color="Orange"/>
<SolidColorBrush x:Name="BrushCBBG" x:Key="KeyBrushCBBG" Color="Purple"/>
<SolidColorBrush x:Name="BrushCBHighlightBG" x:Key="KeyBrushCBHighlightBG" Color="Pink"/>
<SolidColorBrush x:Name="BrushCBHighlightFore" x:Key="KeyBrushCBHighlightFore" Color="DarkBlue"/>
<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="6" Background="{DynamicResource KeyBrushCBBorderBG}" BorderBrush="{DynamicResource KeyBrushCBBorder}" BorderThickness="0" />
<Border Grid.Column="0" CornerRadius="4" Margin="1" Background="{DynamicResource KeyBrushCBBorderBG}" BorderBrush="{DynamicResource KeyBrushCBBorder}" BorderThickness="0,1,0,1" />
<Path x:Name="Arrow" Grid.Column="1" Fill="{DynamicResource KeyBrushButtonForeground}" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z" Stroke="{DynamicResource KeyBrushCBForeGround}"/>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="ComboBoxTextBox" TargetType="{x:Type TextBox}">
<Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" />
</ControlTemplate>
<Style TargetType="{x:Type ComboBox}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
<Setter Property="MinWidth" Value="120"/>
<Setter Property="MinHeight" Value="20"/>
<Setter Property="Foreground" Value="{DynamicResource KeyBrushCBForeGround}"/>
<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="8,3,23,3" VerticalAlignment="Center" HorizontalAlignment="Left" />
<TextBox x:Name="PART_EditableTextBox" Style="{x:Null}" Template="{StaticResource ComboBoxTextBox}" HorizontalAlignment="Left"
VerticalAlignment="Center" Margin="15,3,23,3" Focusable="True" Background="Purple" Foreground="Green" Visibility="Hidden"
IsReadOnly="{TemplateBinding IsReadOnly}" />
<Popup Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True" Focusable="False" PopupAnimation="Scroll">
<Grid Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border x:Name="DropDownBorder" Background="{DynamicResource KeyBrushCBBG}" BorderThickness="1,2,1,2" BorderBrush="{DynamicResource KeyBrushCBBorder}"/>
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
<Setter TargetName="DropDownBorder" Property="CornerRadius" Value="8"/>
<Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="BorderThickness" Value="2,2,2,2"/>
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
<!-- SimpleStyles: ComboBoxItem -->
<Style x:Key="{x:Type ComboBoxItem}" TargetType="{x:Type ComboBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="Foreground" Value="{DynamicResource KeyBrushCBForeGround}"/>
<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="{DynamicResource KeyBrushCBHighlightBG}"/>
<Setter Property="Foreground" Value="{DynamicResource KeyBrushCBHighlightFore}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource KeyBrushCBHighlightFore}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
您必须修改 ToggleButton
模板。 ToggleButton
负责边框。您当前已将 BorderThickness 设置为固定值。只需将它绑定到父 ComboBox
:
<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<!-- The outer border enclosing the complete ComboBox -->
<Border x:Name="Border"
Grid.ColumnSpan="2" CornerRadius="6"
Background="{DynamicResource KeyBrushCBBorderBG}" BorderBrush="{DynamicResource KeyBrushCBBorder}"
BorderThickness="{Binding RelativeSource={RelativeSource AncestorType=ComboBox}, Path=BorderThickness}" />
<!-- The inner border enclosing the TextBox -->
<Border Grid.Column="0" CornerRadius="4" Margin="1" Background="{DynamicResource KeyBrushCBBorderBG}" BorderBrush="{DynamicResource KeyBrushCBBorder}" BorderThickness="0,1,0,1" />
<Path x:Name="Arrow" Grid.Column="1" Fill="{DynamicResource KeyBrushButtonForeground}" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z" Stroke="{DynamicResource KeyBrushCBForeGround}"/>
</Grid>
</ControlTemplate>
以相同的方式从 ComboBox
元素绑定其他属性,如 BorderBrush
和您想要控制的其他属性。
谁能帮我在 IsFocus=True 时让这个 Combobox 改变 borderthickness?
我在过去两个小时内尝试了几种不同的方法,但似乎无法正常工作。
我知道我必须设置触发器...
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="BorderThickness" Value="2,2,2,2"/>
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
但似乎不知道在哪里设置它们。
也忽略颜色。它们都是在 运行 时间或用户更改时设置的。
如有任何帮助,我们将不胜感激。
<SolidColorBrush x:Name="BrushCBForeGround" x:Key="KeyBrushCBForeGround" Color="Orange"/>
<SolidColorBrush x:Name="BrushCBBorder" x:Key="KeyBrushCBBorder" Color="orange"/>
<SolidColorBrush x:Name="BrushCBBorderBG" x:Key="KeyBrushCBBorderBG" Color="Orange"/>
<SolidColorBrush x:Name="BrushCBBG" x:Key="KeyBrushCBBG" Color="Purple"/>
<SolidColorBrush x:Name="BrushCBHighlightBG" x:Key="KeyBrushCBHighlightBG" Color="Pink"/>
<SolidColorBrush x:Name="BrushCBHighlightFore" x:Key="KeyBrushCBHighlightFore" Color="DarkBlue"/>
<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="6" Background="{DynamicResource KeyBrushCBBorderBG}" BorderBrush="{DynamicResource KeyBrushCBBorder}" BorderThickness="0" />
<Border Grid.Column="0" CornerRadius="4" Margin="1" Background="{DynamicResource KeyBrushCBBorderBG}" BorderBrush="{DynamicResource KeyBrushCBBorder}" BorderThickness="0,1,0,1" />
<Path x:Name="Arrow" Grid.Column="1" Fill="{DynamicResource KeyBrushButtonForeground}" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z" Stroke="{DynamicResource KeyBrushCBForeGround}"/>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="ComboBoxTextBox" TargetType="{x:Type TextBox}">
<Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" />
</ControlTemplate>
<Style TargetType="{x:Type ComboBox}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
<Setter Property="MinWidth" Value="120"/>
<Setter Property="MinHeight" Value="20"/>
<Setter Property="Foreground" Value="{DynamicResource KeyBrushCBForeGround}"/>
<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="8,3,23,3" VerticalAlignment="Center" HorizontalAlignment="Left" />
<TextBox x:Name="PART_EditableTextBox" Style="{x:Null}" Template="{StaticResource ComboBoxTextBox}" HorizontalAlignment="Left"
VerticalAlignment="Center" Margin="15,3,23,3" Focusable="True" Background="Purple" Foreground="Green" Visibility="Hidden"
IsReadOnly="{TemplateBinding IsReadOnly}" />
<Popup Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True" Focusable="False" PopupAnimation="Scroll">
<Grid Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border x:Name="DropDownBorder" Background="{DynamicResource KeyBrushCBBG}" BorderThickness="1,2,1,2" BorderBrush="{DynamicResource KeyBrushCBBorder}"/>
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
<Setter TargetName="DropDownBorder" Property="CornerRadius" Value="8"/>
<Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="BorderThickness" Value="2,2,2,2"/>
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
<!-- SimpleStyles: ComboBoxItem -->
<Style x:Key="{x:Type ComboBoxItem}" TargetType="{x:Type ComboBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="Foreground" Value="{DynamicResource KeyBrushCBForeGround}"/>
<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="{DynamicResource KeyBrushCBHighlightBG}"/>
<Setter Property="Foreground" Value="{DynamicResource KeyBrushCBHighlightFore}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource KeyBrushCBHighlightFore}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
您必须修改 ToggleButton
模板。 ToggleButton
负责边框。您当前已将 BorderThickness 设置为固定值。只需将它绑定到父 ComboBox
:
<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<!-- The outer border enclosing the complete ComboBox -->
<Border x:Name="Border"
Grid.ColumnSpan="2" CornerRadius="6"
Background="{DynamicResource KeyBrushCBBorderBG}" BorderBrush="{DynamicResource KeyBrushCBBorder}"
BorderThickness="{Binding RelativeSource={RelativeSource AncestorType=ComboBox}, Path=BorderThickness}" />
<!-- The inner border enclosing the TextBox -->
<Border Grid.Column="0" CornerRadius="4" Margin="1" Background="{DynamicResource KeyBrushCBBorderBG}" BorderBrush="{DynamicResource KeyBrushCBBorder}" BorderThickness="0,1,0,1" />
<Path x:Name="Arrow" Grid.Column="1" Fill="{DynamicResource KeyBrushButtonForeground}" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z" Stroke="{DynamicResource KeyBrushCBForeGround}"/>
</Grid>
</ControlTemplate>
以相同的方式从 ComboBox
元素绑定其他属性,如 BorderBrush
和您想要控制的其他属性。