掲示板お問い合わせランダムジャンプ



この広告は30日以上更新がないブログに表示されております。 新しい記事を書くことで広告を消すことができます。

Top Index

2011年05月19日
ドロップダウンボタンを作る
DropDownButton

<ToolBar DockPanel.Dock="Top">

    <Menu VerticalAlignment="Center" Background="Transparent" Margin="0,-1,0,0" >
        <MenuItem>
            <MenuItem.Header>
                <StackPanel Orientation="Horizontal" >
                    <Label VerticalContentAlignment="Center" Content="DropDownButton" Padding="0,0,3,0" />
                    <Label VerticalContentAlignment="Center" Padding="0" >
                        <Polygon Points="0,0 6,0 3,3" Fill="Black" Stroke="Black" StrokeThickness="0.5" />
                    </Label>
                </StackPanel>
            </MenuItem.Header>
            <MenuItem Header="Inner Menu Item 1"  VerticalAlignment="Center" />
            <MenuItem Header="Inner Menu Item 2"  VerticalAlignment="Center" />
            <MenuItem Header="Inner Menu Item 3"  VerticalAlignment="Center" />
        </MenuItem>
    </Menu>

</ToolBar>
ポイント
  • ドロップダウンボタンの挙動はMenuItemとほぼ同じなので、MenuItemで代用する。
  • MenuItemはMenuの中に入っていないとドロップダウンしないので、Menuがコンテナとして必要。
  • Menu、MenuItemは背景が微妙(ボタンとも違うグラデーションでミスマッチ)なので、透明化して、ごまかす。
  • Menuコントロールないのアイテムは微妙に縦方向にマージンが入り、文字の位置が通常のコントロールとずれたりする。
    サンプルでは上方向のマージンを -1 してごまかしてます。
    試してはいませんが、Menuのコンテナのテンプレートを弄って、マージンを入らないようにするとすっきりするかもしれない。
  • ToolBarの中にセットすると違和感ないですが、ToolBarの外、たとえばGridとかに配置すると、デザイン的に違和感ありまくり。
  • SplitButtonもなんとかして作りたいものです。
スタイル化すると、こんな感じ。

<Style TargetType="{x:Type MenuItem}" x:Key="DropDownMenuItemStyle" >
    <Setter Property="HeaderTemplate">
        <Setter.Value>
            <DataTemplate >
                <StackPanel Orientation="Horizontal" Margin="0,-1,0,0">
                    <Label VerticalContentAlignment="Center" 
                           Content="{Binding Header, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type MenuItem}}}"
                           Padding="0,0,3,0" />
                    <Label VerticalContentAlignment="Center" Padding="0" >
                        <Polygon Points="0,0 6,0 3,3" Fill="Black" Stroke="Black" StrokeThickness="0.5" />
                    </Label>
                </StackPanel>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

[ 投稿者:mk3008 at 22:09 | WPF | コメント(0) | トラックバック(0) ]

2011年05月07日
択一しかできないトグルボタンを作る

<!--トグルラジオボタン -->
<Style TargetType="{x:Type RadioButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type RadioButton}">
                <ToggleButton IsChecked="{Binding IsChecked, Mode=Twoway, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type RadioButton}}}"
                              IsEnabled="{TemplateBinding IsEnabled}"
                              Focusable="False">
                    <ContentPresenter DataContext="{TemplateBinding DataContext}" />
                </ToggleButton>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

ポイント
  • 択一の動作をするコントロール「ラジオボタン」の外見をトグルボタンに変えることで対応する。
  • ラジオボタンのデータコンテンツを利用できるよう、TemplateBindingする。
  • ラジオボタンのチェックステータスをトグルボタンとバインディングする。
    このとき、TemplateBindingではなく、Bindingを使用すること。
    理由:TemplateBindingだと、バインディングモードがTwowayにならないので、ラジオボタンのIsCheckedプロパティが更新されても、トグルボタンのIsCheckedプロパティに反映されない。
  • トグルボタンのFocusableプロパティをFalseにしておくこと。
    理由:トグルボタンはフォーカスがないときにIsCheckedプロパティを更新すると、トグルボタンの周りがなぜかハイライトされるため。
    動作上の問題はありませんが、見た目が変になるのでFalseにしておいたほうが吉。
[ 投稿者:mk3008 at 21:45 | WPF | コメント(0) | トラックバック(0) ]