Top > Programming > .NetFramework > WPF > RadioToggleButton
Last-modified: Mon, 29 Apr 2013 11:05:19 JST
Counter:14470 Today:1 Yesterday:23 Online:2
このエントリーをはてなブックマークに追加

RadioButtonなToggleButtonを実現する

About

この記事の内容を解説するには、まずToggleButtonから解説する必要があります。ToggleButtonは端的にいえば押しっぱなしにできるButtonコントロールです。VisualStudioからWPFアプリケーションを作成する場合に、標準ではツールボックスに表示されていなかったりするので、そもそもToggleButtonの存在について知らない人もいるかもしれません。誤って似たようなコントロールを実装しないように注意する必要があります。

ここではRadioButtonなToggleButtonを実現する方法について解説します。RadioButtonは同一のグループ上に存在する、すべてのRadioButtonの中から一つだけ、選択状態であるRadioButtonを用意するために利用します(複数選択もできますが割愛)。ここでは、同一グループ上に存在するすべてのToggleButtonから、1つだけを選択状態にするようなToggleButtonを実現します。

HowTo

そもそもWPFのRadioButtonはToggleButtonを継承しています。したがって、RadioButtonにToggleButtonの"スタイル"を適用することで、簡単にRadioButton(の外観)をToggleButtonにすることができるようです。外観を変更した後は、一般的なRadioButtonにするのと同じように、設定や操作を行うことができます。

<RadioButton Style="{StaticResource {x:Type ToggleButton} }"> ToggleButton </RadioButton>

しかしながらここで問題があります。Windows7やVistaなどのOS環境下では、ToggleButtonが押された状態と、そうでない状態とで、ToggleButtonの外観が変化しますが、Windows8などの一部のOSでは、外観が変化しません。したがって押されているのか、押されていないのか、外観から判断できないのです。

Windows7上でのサンプルの実行。押されていることが概観の変化からわかる
0.png
Windows8上でのサンプルの実行。押されていることが概観の変化からわからない
1.png

この問題を解決するにはControlTemplateなどを用いる必要がありますが、ControlTemplateの設定は、ちょっとだけ扱いたいときには酷く面倒です。もっとも簡単な解決方法は、Style.Triggerを利用して、一部の条件下(押された・押されていない)でのみ、背景色の設定を変更するなどの対応をとることでしょう。

サンプルでは適当に、通常状態の背景色を透明に、押されたときの背景色を青にするように設定しました。

        <Style TargetType="{x:Type RadioButton}" 
             BasedOn="{StaticResource {x:Type ToggleButton} }">
            <Style.Triggers>
                <Trigger Property="IsChecked" Value="{x:Null}">
                    <Setter Property="Background" Value="Transparent" />
                </Trigger>
                <Trigger Property="IsChecked" Value="False">                 
                    <Setter Property="Background" Value="Transparent" />
                </Trigger>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Background" Value="Blue"/>
                </Trigger>
            </Style.Triggers>
        </Style>
…
            <RadioButton >
                <Ellipse Width="30" Height="30" Fill="Green"/>
            </RadioButton>
Windows8上でのサンプルの実行。押されたボタンの背景が青くなる。
2.png

Reference