看起來完全像擴展器的標籤

Question

在WPF中，我想有一個擴展器，顯示一堆標籤，它們的默認擴展器的確切樣式;圓角，黑色邊框，除開/關圖像外。

任何人都有這樣的風格？

Answer 1

我試圖從默認的擴展器樣式中提取樣式，但我認爲它可能有點不同，也請注意，默認情況下沒有可見的邊框，所以除非更改相應的刷子，否則不會看到圓角邊緣或使用背景色：

<Style x:Key="LabelExpanderStyle" TargetType="{x:Type Label}"> 
     <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> 
     <Setter Property="Background" Value="Transparent"/> 
     <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
     <Setter Property="VerticalContentAlignment" Value="Stretch"/> 
     <Setter Property="BorderBrush" Value="Transparent"/> 
     <Setter Property="BorderThickness" Value="1"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type Label}"> 
        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" CornerRadius="3" SnapsToDevicePixels="true" Margin="1" MinWidth="0" MinHeight="0"> 
         <ContentPresenter /> 
        </Border> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

下面是完整的默認風格，如果你想嘗試自己，因爲它們用於您不希望在標籤上的切換按鈕的所有標題樣式和觸發器是不相關的：

<Style x:Key="ExpanderRightHeaderStyle" TargetType="{x:Type ToggleButton}"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type ToggleButton}"> 
        <Border Padding="{TemplateBinding Padding}"> 
         <Grid Background="Transparent" SnapsToDevicePixels="False"> 
          <Grid.RowDefinitions> 
           <RowDefinition Height="19"/> 
           <RowDefinition Height="*"/> 
          </Grid.RowDefinitions> 
          <Grid> 
           <Grid.LayoutTransform> 
            <TransformGroup> 
             <TransformGroup.Children> 
              <TransformCollection> 
               <RotateTransform Angle="-90"/> 
              </TransformCollection> 
             </TransformGroup.Children> 
            </TransformGroup> 
           </Grid.LayoutTransform> 
           <Ellipse x:Name="circle" HorizontalAlignment="Center" Height="19" Stroke="DarkGray" VerticalAlignment="Center" Width="19"/> 
           <Path x:Name="arrow" Data="M 1,1.5 L 4.5,5 L 8,1.5" HorizontalAlignment="Center" SnapsToDevicePixels="false" Stroke="#666" StrokeThickness="2" VerticalAlignment="Center"/> 
          </Grid> 
          <ContentPresenter HorizontalAlignment="Center" Margin="0,4,0,0" Grid.Row="1" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Top"/> 
         </Grid> 
        </Border> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsChecked" Value="true"> 
          <Setter Property="Data" TargetName="arrow" Value="M 1,4.5 L 4.5,1 L 8,4.5"/> 
         </Trigger> 
         <Trigger Property="IsMouseOver" Value="true"> 
          <Setter Property="Stroke" TargetName="circle" Value="#FF3C7FB1"/> 
          <Setter Property="Stroke" TargetName="arrow" Value="#222"/> 
         </Trigger> 
         <Trigger Property="IsPressed" Value="true"> 
          <Setter Property="Stroke" TargetName="circle" Value="#FF526C7B"/> 
          <Setter Property="StrokeThickness" TargetName="circle" Value="1.5"/> 
          <Setter Property="Stroke" TargetName="arrow" Value="#FF003366"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
    <Style x:Key="ExpanderUpHeaderStyle" TargetType="{x:Type ToggleButton}"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type ToggleButton}"> 
        <Border Padding="{TemplateBinding Padding}"> 
         <Grid Background="Transparent" SnapsToDevicePixels="False"> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="19"/> 
           <ColumnDefinition Width="*"/> 
          </Grid.ColumnDefinitions> 
          <Grid> 
           <Grid.LayoutTransform> 
            <TransformGroup> 
             <TransformGroup.Children> 
              <TransformCollection> 
               <RotateTransform Angle="180"/> 
              </TransformCollection> 
             </TransformGroup.Children> 
            </TransformGroup> 
           </Grid.LayoutTransform> 
           <Ellipse x:Name="circle" HorizontalAlignment="Center" Height="19" Stroke="DarkGray" VerticalAlignment="Center" Width="19"/> 
           <Path x:Name="arrow" Data="M 1,1.5 L 4.5,5 L 8,1.5" HorizontalAlignment="Center" SnapsToDevicePixels="false" Stroke="#666" StrokeThickness="2" VerticalAlignment="Center"/> 
          </Grid> 
          <ContentPresenter Grid.Column="1" HorizontalAlignment="Left" Margin="4,0,0,0" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Center"/> 
         </Grid> 
        </Border> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsChecked" Value="true"> 
          <Setter Property="Data" TargetName="arrow" Value="M 1,4.5 L 4.5,1 L 8,4.5"/> 
         </Trigger> 
         <Trigger Property="IsMouseOver" Value="true"> 
          <Setter Property="Stroke" TargetName="circle" Value="#FF3C7FB1"/> 
          <Setter Property="Stroke" TargetName="arrow" Value="#222"/> 
         </Trigger> 
         <Trigger Property="IsPressed" Value="true"> 
          <Setter Property="Stroke" TargetName="circle" Value="#FF526C7B"/> 
          <Setter Property="StrokeThickness" TargetName="circle" Value="1.5"/> 
          <Setter Property="Stroke" TargetName="arrow" Value="#FF003366"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
    <Style x:Key="ExpanderLeftHeaderStyle" TargetType="{x:Type ToggleButton}"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type ToggleButton}"> 
        <Border Padding="{TemplateBinding Padding}"> 
         <Grid Background="Transparent" SnapsToDevicePixels="False"> 
          <Grid.RowDefinitions> 
           <RowDefinition Height="19"/> 
           <RowDefinition Height="*"/> 
          </Grid.RowDefinitions> 
          <Grid> 
           <Grid.LayoutTransform> 
            <TransformGroup> 
             <TransformGroup.Children> 
              <TransformCollection> 
               <RotateTransform Angle="90"/> 
              </TransformCollection> 
             </TransformGroup.Children> 
            </TransformGroup> 
           </Grid.LayoutTransform> 
           <Ellipse x:Name="circle" HorizontalAlignment="Center" Height="19" Stroke="DarkGray" VerticalAlignment="Center" Width="19"/> 
           <Path x:Name="arrow" Data="M 1,1.5 L 4.5,5 L 8,1.5" HorizontalAlignment="Center" SnapsToDevicePixels="false" Stroke="#666" StrokeThickness="2" VerticalAlignment="Center"/> 
          </Grid> 
          <ContentPresenter HorizontalAlignment="Center" Margin="0,4,0,0" Grid.Row="1" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Top"/> 
         </Grid> 
        </Border> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsChecked" Value="true"> 
          <Setter Property="Data" TargetName="arrow" Value="M 1,4.5 L 4.5,1 L 8,4.5"/> 
         </Trigger> 
         <Trigger Property="IsMouseOver" Value="true"> 
          <Setter Property="Stroke" TargetName="circle" Value="#FF3C7FB1"/> 
          <Setter Property="Stroke" TargetName="arrow" Value="#222"/> 
         </Trigger> 
         <Trigger Property="IsPressed" Value="true"> 
          <Setter Property="Stroke" TargetName="circle" Value="#FF526C7B"/> 
          <Setter Property="StrokeThickness" TargetName="circle" Value="1.5"/> 
          <Setter Property="Stroke" TargetName="arrow" Value="#FF003366"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
    <Style x:Key="ExpanderHeaderFocusVisual"> 
     <Setter Property="Control.Template"> 
      <Setter.Value> 
       <ControlTemplate> 
        <Border> 
         <Rectangle Margin="0" SnapsToDevicePixels="true" Stroke="Black" StrokeThickness="1" StrokeDashArray="1 2"/> 
        </Border> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
    <Style x:Key="ExpanderDownHeaderStyle" TargetType="{x:Type ToggleButton}"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type ToggleButton}"> 
        <Border Padding="{TemplateBinding Padding}"> 
         <Grid Background="Transparent" SnapsToDevicePixels="False"> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="19"/> 
           <ColumnDefinition Width="*"/> 
          </Grid.ColumnDefinitions> 
          <Ellipse x:Name="circle" HorizontalAlignment="Center" Height="19" Stroke="DarkGray" VerticalAlignment="Center" Width="19"/> 
          <Path x:Name="arrow" Data="M 1,1.5 L 4.5,5 L 8,1.5" HorizontalAlignment="Center" SnapsToDevicePixels="false" Stroke="#666" StrokeThickness="2" VerticalAlignment="Center"/> 
          <ContentPresenter Grid.Column="1" HorizontalAlignment="Left" Margin="4,0,0,0" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Center"/> 
         </Grid> 
        </Border> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsChecked" Value="true"> 
          <Setter Property="Data" TargetName="arrow" Value="M 1,4.5 L 4.5,1 L 8,4.5"/> 
         </Trigger> 
         <Trigger Property="IsMouseOver" Value="true"> 
          <Setter Property="Stroke" TargetName="circle" Value="#FF3C7FB1"/> 
          <Setter Property="Stroke" TargetName="arrow" Value="#222"/> 
         </Trigger> 
         <Trigger Property="IsPressed" Value="true"> 
          <Setter Property="Stroke" TargetName="circle" Value="#FF526C7B"/> 
          <Setter Property="StrokeThickness" TargetName="circle" Value="1.5"/> 
          <Setter Property="Stroke" TargetName="arrow" Value="#FF003366"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

    <Style x:Key="DefaultExpanderStyle" TargetType="{x:Type Expander}"> 
     <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> 
     <Setter Property="Background" Value="Transparent"/> 
     <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
     <Setter Property="VerticalContentAlignment" Value="Stretch"/> 
     <Setter Property="BorderBrush" Value="Transparent"/> 
     <Setter Property="BorderThickness" Value="1"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type Expander}"> 
        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="3" SnapsToDevicePixels="true"> 
         <DockPanel> 
          <ToggleButton x:Name="HeaderSite" ContentTemplate="{TemplateBinding HeaderTemplate}" ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}" Content="{TemplateBinding Header}" DockPanel.Dock="Top" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FocusVisualStyle="{StaticResource ExpanderHeaderFocusVisual}" FontStyle="{TemplateBinding FontStyle}" FontStretch="{TemplateBinding FontStretch}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" MinWidth="0" MinHeight="0" Padding="{TemplateBinding Padding}" Style="{StaticResource ExpanderDownHeaderStyle}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> 
          <ContentPresenter x:Name="ExpandSite" DockPanel.Dock="Bottom" Focusable="false" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Visibility="Collapsed" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
         </DockPanel> 
        </Border> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsExpanded" Value="true"> 
          <Setter Property="Visibility" TargetName="ExpandSite" Value="Visible"/> 
         </Trigger> 
         <Trigger Property="ExpandDirection" Value="Right"> 
          <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Right"/> 
          <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Left"/> 
          <Setter Property="Style" TargetName="HeaderSite" Value="{StaticResource ExpanderRightHeaderStyle}"/> 
         </Trigger> 
         <Trigger Property="ExpandDirection" Value="Up"> 
          <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Top"/> 
          <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Bottom"/> 
          <Setter Property="Style" TargetName="HeaderSite" Value="{StaticResource ExpanderUpHeaderStyle}"/> 
         </Trigger> 
         <Trigger Property="ExpandDirection" Value="Left"> 
          <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Left"/> 
          <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Right"/> 
          <Setter Property="Style" TargetName="HeaderSite" Value="{StaticResource ExpanderLeftHeaderStyle}"/> 
         </Trigger> 
         <Trigger Property="IsEnabled" Value="false"> 
          <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style>