これは、ラジオ ボタンに使用しているカスタム スタイルです。コンセプトは、チェックされた状態とチェックされていない状態の間で前景色と背景色を反転させることです。チェックされたボタンの上にマウスを移動して移動するまで、すべてが正常に機能します。前景が原色に戻ります。
これを明確にするために、私は何が起こっていると思いますか。
- ボタンをクリックすると、チェックされた状態がアクティブになります。
- ポインターを上に移動すると、PointerOver 状態がアクティブになり、前景が WhiteTextAndIcons 色に変わります。
- ポインタが前景から出ると、PrimaryColor であるデフォルトに戻るため、背景と一致します。
私が必要とするのは、状態がチェックされている場合、ポインターが移動したり移動したりしたときに、フォアグラウンドがデフォルトに戻らないことです。これはスタイルで可能ですか？
これは私が使用している回避策ですが、ここで何が間違っているのか知りたいです。
回避策:
private void MainPage_PointerExited(object sender, PointerRoutedEventArgs e)
{
if(sender is RadioButton)
{
var radio = sender as RadioButton;
if(radio.IsChecked.HasValue && radio.IsChecked.Value)
{
radio.IsChecked = false;
radio.IsChecked = true;
}
}
}
色とカスタム テンプレート。
<Color x:Key="DarkPrimaryColor">#FF1664A7</Color>
<Color x:Key="PrimaryColor">#FF0078D7</Color>
<Color x:Key="LightPrimaryColor">#FF2488D8</Color>
<Color x:Key="WhiteTextAndIcons">#FFFFFFFF</Color>
<SolidColorBrush x:Key="NavButtonPressedBackgroundBrush" Color="{ThemeResource PrimaryColor}" />
<SolidColorBrush x:Key="NavButtonHoverBackgroundBrush" Color="{ThemeResource LightPrimaryColor}" />
<SolidColorBrush x:Key="NavButtonCheckedBackgroundBrush" Color="{ThemeResource PrimaryColor}" />
<SolidColorBrush x:Key="NavButtonCheckedPressedBackgroundBrush" Color="{ThemeResource DarkPrimaryColor}" />
<SolidColorBrush x:Key="NavButtonCheckedHoverBackgroundBrush" Color="{ThemeResource LightPrimaryColor}" />
<SolidColorBrush x:Key="NavButtonCheckedForegroundBrush" Color="{ThemeResource WhiteTextAndIcons}" />
<SolidColorBrush x:Key="NavButtonForegroundBrush" Color="{ThemeResource PrimaryColor}" />
<Style TargetType="RadioButton" x:Key="SplitViewRadioButtonWithWhiteBGStyle">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="{ThemeResource NavButtonForegroundBrush}" />
<Setter Property="Padding" Value="1,4,0,0" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="HoverBackground.Visibility" Value="Visible"/>
<Setter Target="CheckedHoverBackground.Visibility" Value="Visible"/>
<Setter Target="NixonGlyph.(ContentPresenter.Foreground)" Value="{StaticResource NavButtonCheckedForegroundBrush}"/>
<Setter Target="ContentPresenter.Foreground" Value="{StaticResource NavButtonCheckedForegroundBrush}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="PressedBackground.Visibility" Value="Visible"/>
<Setter Target="CheckedPressedBackground.Visibility" Value="Visible"/>
<Setter Target="NixonGlyph.(ContentPresenter.Foreground)" Value="{StaticResource NavButtonCheckedForegroundBrush}"/>
<Setter Target="ContentPresenter.Foreground" Value="{StaticResource NavButtonCheckedForegroundBrush}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="NixonGlyph.(ContentPresenter.Foreground)" Value="{ThemeResource RadioButtonContentDisabledForegroundThemeBrush}"/>
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource RadioButtonContentDisabledForegroundThemeBrush}"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter Target="CheckedBackground.Visibility" Value="Visible"/>
<Setter Target="NixonGlyph.(ContentPresenter.Foreground)" Value="{StaticResource NavButtonCheckedForegroundBrush}"/>
<Setter Target="ContentPresenter.Foreground" Value="{StaticResource NavButtonCheckedForegroundBrush}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Unchecked" />
<VisualState x:Name="Indeterminate" />
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="FocusVisualWhite" Storyboard.TargetProperty="Opacity" To="1" />
<DoubleAnimation Duration="0" Storyboard.TargetName="FocusVisualBlack" Storyboard.TargetProperty="Opacity" To="1" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="PointerFocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="48" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="Rectangle" x:Name="FocusVisual">
<Setter Property="Opacity" Value="0" />
<Setter Property="StrokeDashArray" Value="1,1" />
<Setter Property="StrokeEndLineCap" Value="Square" />
</Style>
</Grid.Resources>
<!-- background -->
<Grid x:Name="NotCheckedBackground" Grid.ColumnSpan="4">
<Rectangle x:Name="PressedBackground" Visibility="Collapsed" Fill="{StaticResource NavButtonPressedBackgroundBrush}"/>
<Rectangle x:Name="HoverBackground" Visibility="Collapsed" Fill="{StaticResource NavButtonHoverBackgroundBrush}"/>
</Grid>
<Grid x:Name="CheckedBackground" Grid.ColumnSpan="4" Visibility="Collapsed" Background="{StaticResource NavButtonCheckedBackgroundBrush}">
<Rectangle x:Name="CheckedPressedBackground" Visibility="Collapsed" Fill="{StaticResource NavButtonCheckedPressedBackgroundBrush}"/>
<Rectangle x:Name="CheckedHoverBackground" Visibility="Collapsed" Fill="{StaticResource NavButtonCheckedHoverBackgroundBrush}"/>
</Grid>
<!-- focus -->
<Rectangle x:Name="FocusVisualWhite" Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashOffset="1.5" Style="{StaticResource FocusVisual}" />
<Rectangle x:Name="FocusVisualBlack" Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}" StrokeDashOffset="0.5" Style="{StaticResource FocusVisual}" />
<!-- glyph -->
<ContentPresenter x:Name="NixonGlyph" Content="{TemplateBinding Tag}" />
<!-- text -->
<ContentPresenter x:Name="ContentPresenter"
Grid.Column="1"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>