4

超過の拡張 wpf ツールキットの SplitButtonを使用して、私が持っているスタイル「blueButtonStyle」を使用したいと思います。

ボタンは実際にはボタンではないため、スタイルを直接適用しようとしてもうまくいきません! それで、これにどのようにアプローチするのか疑問に思っています。

理想的には、blueButtonStyle を適用できる分割ボタンにボタン プロパティがあるはずですが、表示されません。

これにどのようにアプローチすればよいですか？

乾杯、
ベリル

希望の外観 (blueButtonStyle)

ここに画像の説明を入力

デフォルトの外観

ここに画像の説明を入力

エラーのある現在の xaml 定義 (適用できないスタイル)

<toolkit:SplitButton DockPanel.Dock="Right" Content="{resx:Resx SplitButton_Add}" 
                     Height="25" Width="80" HorizontalAlignment="Right" Margin="15" 
                     Style="{StaticResource blueButtonStyle}"
                     >
    <toolkit:SplitButton.DropDownContent>
        <StackPanel Orientation="Vertical" >
            <StackPanel.Resources>
                <Style TargetType="{x:Type Button}" BasedOn="{StaticResource blueButtonStyle}">
                </Style>
            </StackPanel.Resources>
            <Button Content="Person" Command="{Binding AddNewPersonCommand}"/>
            <Button Content="Company" Command="{Binding AddNewOrganizationCommand}"/>
        </StackPanel>
    </toolkit:SplitButton.DropDownContent>
</toolkit:SplitButton>

SplitButton xaml

<!-- =============================================================================== -->
<!-- SplitButton                                                                     -->
<!-- =============================================================================== -->
<Style TargetType="{x:Type local:SplitButton}">
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="HorizontalContentAlignment" Value="Center" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
    <Setter Property="Padding" Value="3" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:SplitButton}">
                <Grid x:Name="MainGrid" SnapsToDevicePixels="True">
                    <chrome:ButtonChrome x:Name="ControlChrome" Background="{TemplateBinding Background}" RenderEnabled="{TemplateBinding IsEnabled}" CornerRadius="2.75">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Button x:Name="PART_ActionButton" Margin="0" 
                                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Padding="{TemplateBinding Padding}" >
                                <Button.Template>
                                    <ControlTemplate TargetType="Button">
                                        <ContentPresenter />
                                    </ControlTemplate>
                                </Button.Template>
                                <Grid>
                                    <chrome:ButtonChrome x:Name="ActionButtonChrome"
                                               CornerRadius="2.75, 0, 0, 2.75"                                                         
                                               RenderNormal="False"
                                               RenderEnabled="{TemplateBinding IsEnabled}"
                                                          RenderMouseOver="{Binding IsMouseOver, ElementName=PART_ActionButton}"
                                                          RenderPressed="{Binding IsPressed, ElementName=PART_ActionButton}">
                                        <ContentPresenter Name="ActionButtonContent" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="true" />
                                    </chrome:ButtonChrome>
                                </Grid>
                            </Button>
                            <ToggleButton x:Name="PART_ToggleButton"
                                  Grid.Column="1"
                                  IsTabStop="False"
                                  IsChecked="{Binding IsOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                  IsHitTestVisible="{Binding IsOpen, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource InverseBoolConverter}}">
                                <ToggleButton.Template>
                                    <ControlTemplate TargetType="ToggleButton">
                                        <ContentPresenter />
                                    </ControlTemplate>
                                </ToggleButton.Template>
                                <Grid>
                                    <chrome:ButtonChrome x:Name="ToggleButtonChrome"                                                         
                                               CornerRadius="0, 2.75, 2.75, 0"
                                               RenderNormal="False"
                                               RenderChecked="{TemplateBinding IsOpen}"
                                               RenderEnabled="{TemplateBinding IsEnabled}"
                                                          RenderMouseOver="{Binding IsMouseOver, ElementName=PART_ToggleButton}"
                                                          RenderPressed="{Binding IsPressed, ElementName=PART_ToggleButton}">
                                        <Grid x:Name="arrowGlyph" IsHitTestVisible="False" Margin="4,3,4,3">
                                            <Path Width="7" Height="4" Data="M 0,1 C0,1 0,0 0,0 0,0 3,0 3,0 3,0 3,1 3,1 3,1 4,1 4,1 4,1 4,0 4,0 4,0 7,0 7,0 7,0 7,1 7,1 7,1 6,1 6,1 6,1 6,2 6,2 6,2 5,2 5,2 5,2 5,3 5,3 5,3 4,3 4,3 4,3 4,4 4,4 4,4 3,4 3,4 3,4 3,3 3,3 3,3 2,3 2,3 2,3 2,2 2,2 2,2 1,2 1,2 1,2 1,1 1,1 1,1 0,1 0,1 z" Fill="#FF000000" />
                                        </Grid>
                                    </chrome:ButtonChrome>
                                </Grid>
                            </ToggleButton>
                        </Grid>
                    </chrome:ButtonChrome>

                    <Popup x:Name="PART_Popup" 
                     HorizontalOffset="1"
                     VerticalOffset="1"
                     AllowsTransparency="True"
                     StaysOpen="False"
                     Placement="Bottom"
                     Focusable="False"
                     IsOpen="{Binding IsChecked, ElementName=PART_ToggleButton}">
                        <!-- TODO: Create Popup Styles that can be reused on all popups in the toolkit-->
                        <Border BorderThickness="1" Background="{StaticResource PopupBackgroundBrush}" BorderBrush="{StaticResource ColorPickerDarkBorderBrush}">
                            <ContentPresenter Content="{TemplateBinding DropDownContent}" />
                        </Border>
                    </Popup>

                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

ブルーボタンスタイル

<!--BlueButtonStyle-->
<Style x:Key="BlueButtonStyle" TargetType="Button">
    <Setter Property="Padding" Value="20,0" />
    <Setter Property="Margin" Value="3" />
    <Setter Property="Height" Value="23" />
    <Setter Property="MinWidth" Value="75" />
    <Setter Property="Foreground" Value="White" />

    <Setter Property="FocusVisualStyle">
        <Setter.Value>
            <Style>
                <Setter Property="Control.Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <Rectangle RadiusX="5" RadiusY="5" Stroke="Gold" StrokeThickness="1" />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Setter.Value>
    </Setter>

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid x:Name="rootGrid" RenderTransformOrigin=".5,.5">

                    <Grid.Resources>
                        <SolidColorBrush x:Key="borderBrush" Color="Transparent"/>
                    </Grid.Resources>

                    <Grid.RenderTransform>
                        <TranslateTransform X="0" Y="0"/>
                    </Grid.RenderTransform>
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <Rectangle Grid.RowSpan="2" x:Name="bottomBorder" RadiusX="5" RadiusY="5" 
                               Stroke="{StaticResource borderBrush}" StrokeThickness="2"
                               Fill="{StaticResource headerBrush}" />
                    <Rectangle x:Name="highlight" Margin="2.5" Fill="White" RadiusX="3" RadiusY="3">
                        <Rectangle.OpacityMask>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Color="#D0FFFFFF" Offset="0"/>
                                <GradientStop Color="#00FFFFFF" Offset="1"/>
                            </LinearGradientBrush>
                        </Rectangle.OpacityMask>
                    </Rectangle>
                    <ContentPresenter Grid.RowSpan="2"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                        Margin="{TemplateBinding Padding}"
                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                        RecognizesAccessKey="True" RenderTransformOrigin="0.5,0.5" x:Name="contentPresenter" />
                </Grid>
                <ControlTemplate.Resources>
                    <Storyboard x:Key="buttonDown_Animation">
                        <DoubleAnimation Storyboard.TargetName="rootGrid" 
                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"
                                         From="0" To="0" Duration="0:0:0" 
                                         />
                    </Storyboard>
                </ControlTemplate.Resources>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsFocused" Value="True">
                        <Setter TargetName="bottomBorder" Property="Stroke" Value="Black" />
                    </Trigger>

                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="bottomBorder" Property="Stroke" Value="Black" />
                    </Trigger>

                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="bottomBorder" Property="Fill" Value="DarkGray" />
                        <Setter TargetName="bottomBorder" Property="Stroke" Value="Silver" />
                        <Setter TargetName="bottomBorder" Property="StrokeThickness" Value="4" />
                        <Setter TargetName="highlight" Property="Fill" Value="#20FFFFFF" />
                    </Trigger>

                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
4

1 に答える 1

4

私が最初にすることは、BlueButtonStyleが実際にこのタイプのコントロールに適用可能であることを確認することです。

スタイルには、影響を与えることができるプロパティのリストを定義する設定が必要なTargetTypeプロパティがあります。あなたのスタイルは次のようになります。

<Style x:Key="blueButtonStyle" TargetType="{x:Type toolkit:SplitButton}">
    <!-- edit stuff here -->
</Style>

さて、あなたがそれをしたと仮定すると、背景要素とあなたのスタイルにないものをバインドすることは機能しません、あなたはその種のスタイルを可能にするためにSplitButtonのControlTemplateを編集する必要があるかもしれません。ControlTemplateは、特定のコントロールを構成するコントロールを定義します（言い換えると、このSplitButtonのControlTemplateは、一緒になってこのSplitButtonを構成するサブコントロールを定義します）。ControlTemplateのコントロールがBackgroundやForegroundなどのプロパティのバインドを許可するように設定されていない場合、Styleはそれらを変更できません。

ControlTemplateを取得するには、ある種の逆コンパイルツールが必要です。私はこの目的のためにBlendを使用します。

Blendに入ったら、新しいプロジェクトを作成し、SplitButtonをキャンバスに追加します。左下のTreeViewペインに、SplitButtonが表示されます。それを右クリックし、[テンプレートの編集...]に移動して、[コピーの編集]を選択します。

これにより、そのコントロールのControlTemplateの正確な複製が作成され、他のWPFリソースと同じように使用できるようになります。

そのテンプレートで、スタイルを設定するSplitButtonを構成するコントロールを探す必要があります。これらのコントロールで、スタイルを設定するプロパティがTemplateBindingsとして設定されていることを確認してください。それらは次のようになります。

<ControlTemplate x:Key="splitButtonTemplate" TargetType="{x:Type toolkit:SplitButton}">
    <!-- some data here.... -->
    <Button Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" />
</ControlTemplate>

スタイルを設定するプロパティがこの方法でバインドされている限り、TemplateBindingsとして、スタイルによって行われた変更を取得します。

于 2012-05-12T16:14:33.790 に答える