2017-07-14 71 views
0

我有一個Expander右鍵展開方向。這工作正常,但我希望內容仍然出現在擴展器按鈕和標題下。另外我想讓這些按鈕和標題仍然出現在同一行上。這樣做的最好方法是什麼?帶有默認標題的擴展方向右鍵

<Expander Header="Test" ExpandDirection="Right"> 
    <ListBox VerticalAlignment="Top" MaxHeight="400" Name="lbxTest"/> 
</Expander> 
+1

如果你「想有內容仍然出現在擴展按鈕和標題下」,你爲什麼然後設置ExpandDirection爲右沒有更簡單的方法? – mm8

+0

請查看下面的答案以獲得更簡單的版本。 –

+0

聽起來好像您只需要一個正常的擴展器,它是左對齊的,並且在擴展時會在寬度和高度上增長。 – grek40

回答

1

您需要重新模板整個Expander控件。您可以在Expander設計模式在Visual Studio或混合右鍵單擊並選擇編輯模板 - >編輯複製到默認模板它複製到你的XAML標記,然後編輯按您的要求:

<Expander Header="Test" ExpandDirection="Right"> 
    <Expander.Resources> 
     <SolidColorBrush x:Key="Expander.MouseOver.Circle.Stroke" Color="#FF5593FF"/> 
     <SolidColorBrush x:Key="Expander.MouseOver.Circle.Fill" Color="#FFF3F9FF"/> 
     <SolidColorBrush x:Key="Expander.MouseOver.Arrow.Stroke" Color="#FF000000"/> 
     <SolidColorBrush x:Key="Expander.Pressed.Circle.Stroke" Color="#FF3C77DD"/> 
     <SolidColorBrush x:Key="Expander.Pressed.Circle.Fill" Color="#FFD9ECFF"/> 
     <SolidColorBrush x:Key="Expander.Pressed.Arrow.Stroke" Color="#FF000000"/> 
     <SolidColorBrush x:Key="Expander.Disabled.Circle.Stroke" Color="#FFBCBCBC"/> 
     <SolidColorBrush x:Key="Expander.Disabled.Circle.Fill" Color="#FFE6E6E6"/> 
     <SolidColorBrush x:Key="Expander.Disabled.Arrow.Stroke" Color="#FF707070"/> 
     <SolidColorBrush x:Key="Expander.Static.Circle.Fill" Color="#FFFFFFFF"/> 
     <SolidColorBrush x:Key="Expander.Static.Circle.Stroke" Color="#FF333333"/> 
     <SolidColorBrush x:Key="Expander.Static.Arrow.Stroke" Color="#FF333333"/> 
     <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.ColumnDefinitions> 
            <ColumnDefinition Width="Auto" /> 
            <ColumnDefinition Width="*" /> 
           </Grid.ColumnDefinitions> 
           <Grid> 
            <Grid.LayoutTransform> 
             <TransformGroup> 
              <TransformGroup.Children> 
               <TransformCollection> 
                <RotateTransform Angle="-90"/> 
               </TransformCollection> 
              </TransformGroup.Children> 
             </TransformGroup> 
            </Grid.LayoutTransform> 
            <Ellipse x:Name="circle" Fill="{StaticResource Expander.Static.Circle.Fill}" HorizontalAlignment="Center" Height="19" Stroke="{StaticResource Expander.Static.Circle.Stroke}" 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="{StaticResource Expander.Static.Arrow.Stroke}" StrokeThickness="2" VerticalAlignment="Center"/> 
           </Grid> 
           <ContentPresenter HorizontalAlignment="Center" Margin="4,4,0,0" Grid.Column="1" 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="{StaticResource Expander.MouseOver.Circle.Stroke}"/> 
           <Setter Property="Fill" TargetName="circle" Value="{StaticResource Expander.MouseOver.Circle.Fill}"/> 
           <Setter Property="Stroke" TargetName="arrow" Value="{StaticResource Expander.MouseOver.Arrow.Stroke}"/> 
          </Trigger> 
          <Trigger Property="IsPressed" Value="true"> 
           <Setter Property="Stroke" TargetName="circle" Value="{StaticResource Expander.Pressed.Circle.Stroke}"/> 
           <Setter Property="StrokeThickness" TargetName="circle" Value="1.5"/> 
           <Setter Property="Fill" TargetName="circle" Value="{StaticResource Expander.Pressed.Circle.Fill}"/> 
           <Setter Property="Stroke" TargetName="arrow" Value="{StaticResource Expander.Pressed.Arrow.Stroke}"/> 
          </Trigger> 
          <Trigger Property="IsEnabled" Value="false"> 
           <Setter Property="Stroke" TargetName="circle" Value="{StaticResource Expander.Disabled.Circle.Stroke}"/> 
           <Setter Property="Fill" TargetName="circle" Value="{StaticResource Expander.Disabled.Circle.Fill}"/> 
           <Setter Property="Stroke" TargetName="arrow" Value="{StaticResource Expander.Disabled.Arrow.Stroke}"/> 
          </Trigger> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </Expander.Resources> 
    <Expander.Template> 
     <ControlTemplate TargetType="{x:Type Expander}"> 
      <Border BorderBrush="{TemplateBinding BorderBrush}" 
          BorderThickness="{TemplateBinding BorderThickness}" 
          Background="{TemplateBinding Background}" 
          CornerRadius="3" SnapsToDevicePixels="true"> 
       <Grid> 
        <Grid.RowDefinitions> 
         <RowDefinition /> 
         <RowDefinition Height="*" /> 
        </Grid.RowDefinitions> 
        <ToggleButton x:Name="HeaderSite" ContentTemplate="{TemplateBinding HeaderTemplate}" ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}" Content="{TemplateBinding Header}" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" 
              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 ExpanderRightHeaderStyle}" 
              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" 
              HorizontalAlignment="Left"> 
         <ToggleButton.FocusVisualStyle> 
          <Style> 
           <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> 
         </ToggleButton.FocusVisualStyle> 
        </ToggleButton> 
        <ContentPresenter x:Name="ExpandSite" Grid.Row="1" Focusable="false" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Visibility="Collapsed" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
       </Grid> 
      </Border> 
      <ControlTemplate.Triggers> 
       <Trigger Property="IsExpanded" Value="true"> 
        <Setter Property="Visibility" TargetName="ExpandSite" Value="Visible"/> 
       </Trigger> 
       <Trigger Property="IsEnabled" Value="false"> 
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/> 
       </Trigger> 
      </ControlTemplate.Triggers> 
     </ControlTemplate> 
    </Expander.Template> 
    <ListBox VerticalAlignment="Top" MaxHeight="400" Name="lbxTest"/> 
</Expander> 

沒有,還有就是做這個:)

+0

並使用Expander按鈕獲取標題內聯? – windowskm

+0

是的,在一個空窗口的網格內,「擴展器」按鈕下方顯示「測試」。 – windowskm

+0

哦,你需要編輯ExpanderRightHeaderStyle一下。我編輯了我的答案。請再試一次:) – mm8

0
This is a bit of Trick but can be done as under : 

    <Expander Header="Test" ExpandDirection="Right"> 
       <Grid> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="25"/> 
         <RowDefinition Height="50"/> 
        </Grid.RowDefinitions> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition/> 
        </Grid.ColumnDefinitions> 
        <Button Content="Test" Grid.Row="1" Margin="-25,20,0,0" Height="25" Width="50" HorizontalAlignment="Left"/> 
       </Grid> 
      </Expander> 


    You need to give a negative margin for the left portion value. 
Also you have to give margin for the top portion so that the header for the expander gets visible. 
+0

標題測試仍然出現在Expander按鈕下面的行上:/ – windowskm

+0

您可以使用Margin =「35,-30,0,0」作爲Button查看標題右側的按鈕。 –