web-dev-qa-db-ja.com

WPF RadioButton / ToggleButtonスタイリング

下の画像のように、ToggleButtonのグループのスタイルを模倣したいと思います。一度に「チェック」できるのは1つのボタンだけです。

enter image description here

私の質問はスタイリングに関連しています：

  • 画像のように左端のボタンと右端のボタンの角を丸くしたいのですが、（画像のように）間にボタンがある場合は、角を丸くしないでください。切り替えるボタンが2つしかない場合もあります。
  • さまざまな状態のスタイルが必要です。少なくとも、「通常/チェックなし」、「マウスオーバー」、「押された」、「チェック済み」です。

これに使用している現在の制御は次のように行われます。

<StackPanel Orientation="Horizontal" >
    <RadioButton Style="{StaticResource {x:Type ToggleButton}}" Content="All" Padding="12,8,12,8" GroupName="View"  />
    <RadioButton Style="{StaticResource {x:Type ToggleButton}}" Content="Geolocated" Padding="12,8,12,8" GroupName="View" />
    <RadioButton Style="{StaticResource {x:Type ToggleButton}}" Content="Non Geolocated" Padding="12,8,12,8" GroupName="View" />
</StackPanel>

StackPanelリソースで、ToggleButtonのスタイルを設定しようとしていますが、上の画像のように結果を得る方法がかなりわかりません。

wpfstylesradio-buttontogglebutton
13
Nuts

これは最も簡単で最善のアプローチではないかもしれませんが、Kaxamlを使用してControlTemplatesをノックアップし、次のようなものを作成しました。

Button Preview

これらのテンプレートをResourceDictionaryに保存し、必要に応じて適用するか、ボタンリストをその場で作成する場合に使用できます。

私は実際に3つのわずかに異なるスタイルを作成しました。1つは左ボタンと右ボタン用、もう1つは中央用です（スタイルを拡張/継承することでこれを単純化できる場合があります）。一部の繰り返しコードが省略されています。

<Grid>
    <Grid.Resources>
        <!-- Brushes for colours/backgrounds -->
        <SolidColorBrush x:Key="FontBrush" Color="#DDDDDD"/>

        <LinearGradientBrush x:Key="BgBrush1" StartPoint="0,0" EndPoint="0,1">
            <GradientStop Offset="0" Color="#888888"/>
            <GradientStop Offset="1" Color="#222222"/>
        </LinearGradientBrush>

        <SolidColorBrush x:Key="BorderBrush1" Color="#333333"/>
        <LinearGradientBrush x:Key="CheckedBrush" StartPoint="0,0" EndPoint="0,1">
            <GradientStop Offset="0" Color="#555555"/>
            <GradientStop Offset="1" Color="#111111"/>
        </LinearGradientBrush>

        <!-- Left Button Template -->
        <ControlTemplate x:Key="ToggleButtonLeft" TargetType="{x:Type ToggleButton}">
            <Border
                Name="Border"
                Background="{StaticResource BgBrush1}"
                BorderBrush="{StaticResource BorderBrush1}"
                BorderThickness="1"
                CornerRadius="5,0,0,5">
                <ContentPresenter
                    HorizontalAlignment="Center"
                    Margin="{TemplateBinding Padding}"
                    VerticalAlignment="Center"
                    Content="{TemplateBinding Content}"
                    TextBlock.FontWeight="Bold"
                    TextBlock.Foreground="{StaticResource FontBrush}"/>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="ToggleButton.IsMouseOver" Value="true">
                    <Setter TargetName="Border" Property="Background" Value="#808080"/>
                </Trigger>
                <Trigger Property="IsChecked" Value="true">
                    <Setter TargetName="Border" Property="Background" Value="{StaticResource CheckedBrush}"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

        <!-- Middle Button(s) Template -->
        <ControlTemplate x:Key="ToggleButtonMid" TargetType="{x:Type ToggleButton}">
            <Border
                Name="Border"
                Background="{StaticResource BgBrush1}"
                BorderBrush="{StaticResource BorderBrush1}"
                BorderThickness="0,1,0,1"
                CornerRadius="0" />
        <!-- Other code identical to Left Button Template -->       
        </ControlTemplate>

        <!-- Right Button Template -->
        <ControlTemplate x:Key="ToggleButtonRight" TargetType="{x:Type ToggleButton}">
            <Border
                Name="Border"
                Background="{StaticResource BgBrush1}"
                BorderBrush="{StaticResource BorderBrush1}"
                BorderThickness="1"
                CornerRadius="0, 5, 5, 0" />
        <!-- Other code identical to Left Button Template -->  
        </ControlTemplate>
    </Grid.Resources>

    <!-- Example Usage -->
    <Grid Background="#555555">
        <StackPanel Height="25" Orientation="Horizontal" Margin="5">
            <RadioButton Content="All" GroupName="View" Padding="2" Template="{DynamicResource ToggleButtonLeft}"/>
            <RadioButton Content="Geolocated" GroupName="View" Padding="2" Template="{DynamicResource ToggleButtonMid}"/>
            <RadioButton Content="Non Geolocated" GroupName="View" Padding="2" Template="{DynamicResource ToggleButtonRight}"/>
        </StackPanel>
    </Grid>
</Grid>

Triggers状態、およびその他の必要なもの（IsPressedなど）には、IsEnabledなどを追加する必要があります。

14
Chris