选中 ToggleButton 后，如何更改 ToggleButton 的边框圆角半径？
How can I change the Border Corner Radius of my ToggleButton when ToggleButton is checked?
我得到了一个 ComboBox，其中有一个 Style，其中 ToggleButton 在上面。我给了它一个 CornerRadius，我希望当我检查 ToggleButton 并且我的 ComboBox 打开时，底部 CornerRadius 应该改变。我的 ComboBox 风格：
<Style x:Key="ComboBoxStyle1" TargetType="{x:Type ComboBox}">
<Setter Property="Foreground" Value="#D4D4E1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition MaxWidth="18"/>
</Grid.ColumnDefinitions>
<ToggleButton Name="PART_EditableTextBox"
Style="{StaticResource MyButton}"
IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
Padding="5,0,0,0" BorderThickness="0"
Height="{TemplateBinding Height}">
<ToggleButton.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="10 0 0 10"/>
</Style>
</ToggleButton.Resources>
</ToggleButton>
<ToggleButton Grid.Column="1" Margin="0" Background="#2C2F33"
Height="{TemplateBinding Height}" Style="{StaticResource MyButton}"
Focusable="False" BorderThickness="0"
IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press">
<Path Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z"
Fill="LightBlue" />
<ToggleButton.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="0 10 10 0"/>
</Style>
</ToggleButton.Resources>
</ToggleButton>
<ContentPresenter Name="ContentSite"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="5,0,0,0"/>
<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"
BorderThickness="0"
CornerRadius="0 0 7 7"
Background="#2E3136"
BorderBrush="Black"/>
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
我的ToggleButton风格：
<Style x:Key="MyButton" TargetType="{x:Type ToggleButton}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Background" Value="#2C2F33" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border Name="border" BorderThickness="0" BorderBrush="Black" Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" Value="0.8" />
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="" Property="" Value="0.8" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
关闭ComboBox时的样子：
打开后是这样的：
但是，我无法更改底部 CornerRadius 以获得这种类型的外观 Google:
您可以将 DataTrigger 添加到 ToggleButton 样式，根据 ComboBox 的 IsDropDownOpen 属性 更改 CornerRadius , 指示是否显示 Popup。
<DataTrigger Binding="{Binding IsDropDownOpen, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}" Value="True">
<Setter Property="CornerRadius" Value="10 0 0 0" />
</DataTrigger>
<DataTrigger Binding="{Binding IsDropDownOpen, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}" Value="True">
<Setter Property="CornerRadius" Value="0 10 0 0" />
</DataTrigger>
RelativeSource 用于引用父 ComboBox 作为来源。这是完整的代码：
<Style x:Key="ComboBoxStyle1" TargetType="{x:Type ComboBox}">
<Setter Property="Foreground" Value="#D4D4E1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition MaxWidth="18"/>
</Grid.ColumnDefinitions>
<ToggleButton Name="PART_EditableTextBox"
Style="{StaticResource MyButton}"
IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
Padding="5,0,0,0" BorderThickness="0"
Height="{TemplateBinding Height}">
<ToggleButton.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="10 0 0 10"/>
<Style.Triggers>
<DataTrigger Binding="{Binding IsDropDownOpen, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}" Value="True">
<Setter Property="CornerRadius" Value="10 0 0 0" />
</DataTrigger>
</Style.Triggers>
</Style>
</ToggleButton.Resources>
</ToggleButton>
<ToggleButton Grid.Column="1" Margin="0" Background="#2C2F33"
Height="{TemplateBinding Height}" Style="{StaticResource MyButton}"
Focusable="False" BorderThickness="0"
IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press">
<Path Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z"
Fill="LightBlue" />
<ToggleButton.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="0 10 10 0"/>
<Style.Triggers>
<DataTrigger Binding="{Binding IsDropDownOpen, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}" Value="True">
<Setter Property="CornerRadius" Value="0 10 0 0" />
</DataTrigger>
</Style.Triggers>
</Style>
</ToggleButton.Resources>
</ToggleButton>
<ContentPresenter Name="ContentSite"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="5,0,0,0"/>
<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"
BorderThickness="0"
CornerRadius="0 0 7 7"
Background="#2E3136"
BorderBrush="Black"/>
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
关闭和打开状态如下所示：
我得到了一个 ComboBox，其中有一个 Style，其中 ToggleButton 在上面。我给了它一个 CornerRadius，我希望当我检查 ToggleButton 并且我的 ComboBox 打开时，底部 CornerRadius 应该改变。我的 ComboBox 风格：
<Style x:Key="ComboBoxStyle1" TargetType="{x:Type ComboBox}">
<Setter Property="Foreground" Value="#D4D4E1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition MaxWidth="18"/>
</Grid.ColumnDefinitions>
<ToggleButton Name="PART_EditableTextBox"
Style="{StaticResource MyButton}"
IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
Padding="5,0,0,0" BorderThickness="0"
Height="{TemplateBinding Height}">
<ToggleButton.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="10 0 0 10"/>
</Style>
</ToggleButton.Resources>
</ToggleButton>
<ToggleButton Grid.Column="1" Margin="0" Background="#2C2F33"
Height="{TemplateBinding Height}" Style="{StaticResource MyButton}"
Focusable="False" BorderThickness="0"
IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press">
<Path Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z"
Fill="LightBlue" />
<ToggleButton.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="0 10 10 0"/>
</Style>
</ToggleButton.Resources>
</ToggleButton>
<ContentPresenter Name="ContentSite"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="5,0,0,0"/>
<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"
BorderThickness="0"
CornerRadius="0 0 7 7"
Background="#2E3136"
BorderBrush="Black"/>
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
我的ToggleButton风格：
<Style x:Key="MyButton" TargetType="{x:Type ToggleButton}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Background" Value="#2C2F33" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border Name="border" BorderThickness="0" BorderBrush="Black" Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" Value="0.8" />
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="" Property="" Value="0.8" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
关闭ComboBox时的样子：
打开后是这样的：
但是，我无法更改底部 CornerRadius 以获得这种类型的外观 Google:
您可以将 DataTrigger 添加到 ToggleButton 样式，根据 ComboBox 的 IsDropDownOpen 属性 更改 CornerRadius , 指示是否显示 Popup。
<DataTrigger Binding="{Binding IsDropDownOpen, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}" Value="True">
<Setter Property="CornerRadius" Value="10 0 0 0" />
</DataTrigger>
<DataTrigger Binding="{Binding IsDropDownOpen, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}" Value="True">
<Setter Property="CornerRadius" Value="0 10 0 0" />
</DataTrigger>
RelativeSource 用于引用父 ComboBox 作为来源。这是完整的代码：
<Style x:Key="ComboBoxStyle1" TargetType="{x:Type ComboBox}">
<Setter Property="Foreground" Value="#D4D4E1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition MaxWidth="18"/>
</Grid.ColumnDefinitions>
<ToggleButton Name="PART_EditableTextBox"
Style="{StaticResource MyButton}"
IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
Padding="5,0,0,0" BorderThickness="0"
Height="{TemplateBinding Height}">
<ToggleButton.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="10 0 0 10"/>
<Style.Triggers>
<DataTrigger Binding="{Binding IsDropDownOpen, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}" Value="True">
<Setter Property="CornerRadius" Value="10 0 0 0" />
</DataTrigger>
</Style.Triggers>
</Style>
</ToggleButton.Resources>
</ToggleButton>
<ToggleButton Grid.Column="1" Margin="0" Background="#2C2F33"
Height="{TemplateBinding Height}" Style="{StaticResource MyButton}"
Focusable="False" BorderThickness="0"
IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press">
<Path Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z"
Fill="LightBlue" />
<ToggleButton.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="0 10 10 0"/>
<Style.Triggers>
<DataTrigger Binding="{Binding IsDropDownOpen, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}" Value="True">
<Setter Property="CornerRadius" Value="0 10 0 0" />
</DataTrigger>
</Style.Triggers>
</Style>
</ToggleButton.Resources>
</ToggleButton>
<ContentPresenter Name="ContentSite"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="5,0,0,0"/>
<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"
BorderThickness="0"
CornerRadius="0 0 7 7"
Background="#2E3136"
BorderBrush="Black"/>
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
关闭和打开状态如下所示：