WPF Toolkit DropDownButton 스타일 수정

Question

배경색을 설정할 수 있도록 WpfToolkit의 DropDownButton 스타일을 수정하려고합니다.

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:chrome="clr-namespace:Xceed.Wpf.Toolkit.Chromes" 
        xmlns:conv="clr-namespace:Xceed.Wpf.Toolkit.Core.Converters" 
        xmlns:local="clr-namespace:Xceed.Wpf.Toolkit"> 

    <conv:InverseBoolConverter x:Key="InverseBoolConverter" /> 

    <LinearGradientBrush x:Key="PopupDarkBorderBrush" EndPoint="0.5,1" StartPoint="0.5,0"> 
     <GradientStop Color="#FFA3AEB9" Offset="0" /> 
     <GradientStop Color="#FF8399A9" Offset="0.375" /> 
     <GradientStop Color="#FF718597" Offset="0.375" /> 
     <GradientStop Color="#FF617584" Offset="1" /> 
    </LinearGradientBrush> 

    <LinearGradientBrush x:Key="PopupBackgroundBrush" StartPoint="0,0" EndPoint="0,1"> 
     <LinearGradientBrush.GradientStops> 
     <GradientStopCollection> 
      <GradientStop Offset="0" Color="#FFffffff" /> 
      <GradientStop Offset="1" Color="#FFE8EBED" /> 
     </GradientStopCollection> 
     </LinearGradientBrush.GradientStops> 
    </LinearGradientBrush> 

    <Style TargetType="{x:Type local:DropDownButton}"> 
     <Setter Property="BorderThickness" Value="1" /> 
     <Setter Property="IsTabStop" Value="False" /> 
     <Setter Property="HorizontalContentAlignment" Value="Center" /> 
     <Setter Property="VerticalContentAlignment" Value="Center" /> 
     <Setter Property="Padding" Value="3" /> 
     <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type local:DropDownButton}"> 
       <Grid x:Name="MainGrid" SnapsToDevicePixels="True"> 
        <ToggleButton x:Name="PART_DropDownButton" 
           Grid.Column="1" 
           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="2.75" 
              RenderChecked="{TemplateBinding IsOpen}" 
              RenderEnabled="{TemplateBinding IsEnabled}" 
                 RenderMouseOver="{Binding IsMouseOver, ElementName=PART_DropDownButton}" 
                 RenderPressed="{Binding IsPressed, ElementName=PART_DropDownButton}"> 
          <Grid> 
           <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="*" /> 
           <ColumnDefinition Width="Auto" /> 
           </Grid.ColumnDefinitions> 
           <ContentPresenter Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="true" /> 
           <Grid x:Name="arrowGlyph" IsHitTestVisible="False" Margin="4,3,4,3" Grid.Column="1"> 
           <Path x:Name="Arrow" 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> 
          </Grid> 
         </chrome:ButtonChrome> 
        </Grid> 
        </ToggleButton> 

        <Popup x:Name="PART_Popup" 
         HorizontalOffset="1" 
         VerticalOffset="1" 
         AllowsTransparency="True" 
         StaysOpen="False" 
         Placement="Bottom" 
         Focusable="False" 
         IsOpen="{Binding IsChecked, ElementName=PART_DropDownButton}"> 
        <Border BorderThickness="1" Background="{StaticResource PopupBackgroundBrush}" BorderBrush="{StaticResource PopupDarkBorderBrush}"> 
         <ContentPresenter x:Name="PART_ContentPresenter" Content="{TemplateBinding DropDownContent}" /> 
        </Border> 
        </Popup> 

       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsEnabled" Value="False"> 
         <Setter Property="Fill" TargetName="Arrow" Value="#AFAFAF" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
     </Setter> 
    </Style> 
</ResourceDictionary> 

내가 지금처럼 DropDownButton를 만드는 오전 : 여기

는 DropDownButton의 기본 스타일

<extToolkit:DropDownButton VerticalAlignment="Center" Background="Red"> 
      <extToolkit:DropDownButton.Content> 
       <TextBlock>Click me</TextBlock> 
      </extToolkit:DropDownButton.Content> 
      <extToolkit:DropDownButton.DropDownContent> 
       <TextBlock>Popup</TextBlock> 
      </extToolkit:DropDownButton.DropDownContent> 
     </extToolkit:DropDownButton> 

내가 빨간색으로 배경을 설정하지만 아무런 영향을주지 않습니다.

<Grid Background="{TemplateBinding Background}"> 
              <Grid.ColumnDefinitions> 
               <ColumnDefinition Width="*" /> 
               <ColumnDefinition Width="Auto" /> 
              </Grid.ColumnDefinitions> 
              <ContentPresenter Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="true" /> 
              <Grid x:Name="arrowGlyph" IsHitTestVisible="False" Margin="4,3,4,3" Grid.Column="1"> 
               <Path x:Name="Arrow" 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> 
             </Grid> 

을하지만 내가 내 컨트롤에서 설정 상관없이 배경 색상을 변경하지 않은 : 그래서 내가 설정 한 배경에 결합하는 DropDownButton의 스타일의 배경을 설정했습니다. 스타일 (바인딩 없음)에서 배경색을 직접 설정하면 색상이 적용되지만 어떤 이유로 ButtonChrome에 정의 된 CornerRadius가 사라지고 버튼이 사각형으로 되돌아갑니다.

제안 사항? 난 그냥 컨트롤을 정의 할 때 드롭 다운 버튼과 PART_Popup의 배경을 설정할 수 있기를 원합니다.

Answer 1

ButtonChrome은 CornerRadius 속성을 잃지 않고 임의의 배경색을 설정할 수 없습니다.

<ToggleButton x:Name="ToggleButtonChrome" 
       Background="{TemplateBinding Background}" 
       IsEnabled="{TemplateBinding IsEnabled}" 
       IsChecked="{Binding IsOpen, ElementName=PART_Popup}"> 

하지만 난 아이콘 버튼은 나를 위해 방법을하지 않는다, 한가운데에 서있다 : 당신이 그것을 좋아하지 않는 경우에, 당신은 대안으로, 나는이에 대한 ToggleButton을 사용하고, 대안을 찾기 위해 필요 하지 없애, 그래서 그 공간에 의해 보상 Content 속성에있어 : ​​

:

Content=" Click me   " 

가 팝업에 대한 Background을 설정하려면, 나는 PropertyExtension 네임 스페이스에있는 부착 종속성 속성의 배경을 생성 01 23,516,

public static class Popup 
{ 
    #region Popup Background Property 

    public static readonly DependencyProperty BackgroundProperty; 

    public static void SetBackground(DependencyObject DepObject, Brush value) 
    { 
     DepObject.SetValue(BackgroundProperty, value); 
    } 

    public static Brush GetBackground(DependencyObject DepObject) 
    { 
     return (Brush)DepObject.GetValue(BackgroundProperty); 
    } 

    #endregion 

    static Popup() 
    { 
     #region Popup Background Registration 

     PropertyMetadata BrushPropertyMetadata = new PropertyMetadata(Brushes.Transparent); 

     BackgroundProperty = DependencyProperty.RegisterAttached("Background", 
                 typeof(Brush), 
                 typeof(Popup), 
                 BrushPropertyMetadata); 

     #endregion 
    } 
} 

그리고 ControlTemplate 설정은 다음과 같이 사용

<Popup x:Name="PART_Popup" 
     IsOpen="{Binding IsChecked, ElementName=PART_DropDownButton}" 
     ...>         
    <Border BorderThickness="1" 
      Background="{TemplateBinding PropertyExtension:Popup.Background}"> <!-- Here --> 

     <ContentPresenter x:Name="PART_ContentPresenter" 
          Content="{TemplateBinding DropDownContent}" /> 
    </Border> 
</Popup> 

예 :

<Grid> 
    <wpfx:DropDownButton PropertyExtension:Popup.Background="{StaticResource PopupBackground}" 
         Content=" Click me   " 
         HorizontalContentAlignment="Left" 
         Background="CadetBlue" 
         Width="80" 
         Height="30" > 

     <wpfx:DropDownButton.DropDownContent> 
      <TextBlock Width="100" 
         Height="100" 
         Text="Popup" /> 
     </wpfx:DropDownButton.DropDownContent> 
    </wpfx:DropDownButton> 
</Grid> 

초기 상태 :

최종 상태 :

0123을

전체 프로젝트는이 link 볼 수 있습니다. 전체 예를 아래

:

<Window.Resources> 
    <wpfx:InverseBoolConverter x:Key="InverseBoolConverter" /> 
    <SolidColorBrush x:Key="PopupBackground" Color="Beige" /> 

    <Style TargetType="{x:Type wpfx:DropDownButton}"> 
     <Setter Property="BorderThickness" Value="1" /> 
     <Setter Property="IsTabStop" Value="False" /> 

     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type wpfx:DropDownButton}"> 
        <Grid x:Name="MainGrid"            
          SnapsToDevicePixels="True"> 

         <ToggleButton x:Name="PART_DropDownButton" 
             Grid.Column="1" 
             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> 
           <ToggleButton x:Name="ToggleButtonChrome" 
               Background="{TemplateBinding Background}" 
               IsEnabled="{TemplateBinding IsEnabled}" 
               IsChecked="{Binding IsOpen, ElementName=PART_Popup}"> 

            <Grid> 
             <Grid.ColumnDefinitions> 
              <ColumnDefinition Width="*" /> 
              <ColumnDefinition Width="Auto" /> 
             </Grid.ColumnDefinitions> 

             <ContentPresenter Content="{TemplateBinding Content}" 
                  ContentTemplate="{TemplateBinding ContentTemplate}" 
                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                  RecognizesAccessKey="True" /> 

             <Grid x:Name="arrowGlyph" 
               IsHitTestVisible="False" 
               Margin="4,3,4,3"             
               Grid.Column="1"> 

              <Path x:Name="Arrow" 
                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> 
            </Grid> 
           </ToggleButton> 
          </Grid> 
         </ToggleButton> 

         <Popup x:Name="PART_Popup" 
           IsOpen="{Binding IsChecked, ElementName=PART_DropDownButton}" 
           HorizontalOffset="1" 
           VerticalOffset="1" 
           AllowsTransparency="True" 
           StaysOpen="False" 
           Placement="Bottom" 
           Focusable="False"> 

          <Border BorderThickness="1" 
            Background="{TemplateBinding PropertyExtension:Popup.Background}"> 

           <ContentPresenter x:Name="PART_ContentPresenter" 
                Content="{TemplateBinding DropDownContent}" /> 
          </Border> 
         </Popup> 
        </Grid> 

        <ControlTemplate.Triggers> 
         <Trigger Property="IsEnabled" Value="False"> 
          <Setter Property="Fill" TargetName="Arrow" Value="#AFAFAF" /> 
         </Trigger>        
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</Window.Resources> 

<Grid> 
    <wpfx:DropDownButton PropertyExtension:Popup.Background="{StaticResource PopupBackground}" 
         Content=" Click me   " 
         HorizontalContentAlignment="Left" 
         Background="CadetBlue" 
         Width="80" 
         Height="30" > 

     <wpfx:DropDownButton.DropDownContent> 
      <TextBlock Width="100" 
         Height="100" 
         Text="Popup" /> 
     </wpfx:DropDownButton.DropDownContent> 
    </wpfx:DropDownButton> 
</Grid>