4
초과의의 SplitButton을 사용하여 "blueButtonStyle"스타일을 사용하고 싶습니다.SplitButton의 스타일 방법
버튼이 실제로 버튼이 아니기 때문에 스타일을 직접 적용하려고하지 마십시오! 그래서 이것에 접근하는 방법을 궁금해합니다.
블루 버튼 스타일을 적용 할 수있는 버튼 버튼에 이상적으로 버튼 속성이 있지만 표시되지 않습니다.
어떻게 접근해야합니까?
건배,
Berryl
원하는 모양 (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 내가 할 것이 우선이 BlueButtonStyle는 컨트롤의이 유형에 실제로 적용 할 수 있는지 확인입니다
<!--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>
BlueButtonStyle에서의 바인딩 유형이 올바르지 않습니다. Button 컨트롤에 바인딩하려면 바인딩이 TargetType = "{x : Type Button}"과 같아야합니다. 네가 가지고있는 것은 그 타입을 특정 문자열에 묶어 놓았다. 유용한 유형을 얻으려면 객체에 바인딩해야합니다. , –