使用默认标头扩展方向右

时间:2017-07-14 08:45:53

标签: wpf expander

我的Expander展开方向正确。这工作正常,但我希望内容仍然显示在扩展器按钮和标题下。另外我想让这些,按钮和标题,仍然出现在同一行。这样做的最佳方式是什么?

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

3 个答案:

答案 0 :(得分:1)

您需要重新模板化整个Expander控件。您可以在Visual Studio或Blend中的设计模式下右键单击Expander,然后选择编辑模板 - >编辑副本将默认模板复制到XAML标记中,然后根据您的要求进行编辑: / p>

<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>

不,没有更简单的方法:)

答案 1 :(得分: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.

答案 2 :(得分:0)

除了修改模板之外,还可以选择分离组件并利用触发器。扩展器为空,触发器与显示内容的堆栈面板相关联。

示例:

<StackPanel Orientation="Horizontal" >
    <Label Content="Filter Options">
        <Label.Style>
            <Style TargetType="{x:Type Label}" BasedOn="{StaticResource InlineLabel}">
                <Setter Property="FontWeight" Value="Bold"/>
                <Setter Property="TextBlock.TextDecorations" Value="Underline" />
            </Style>
        </Label.Style>
    </Label>
    <Expander Name="FilterExpander" IsExpanded="False" ExpandDirection="Right" />

    <!-- This stack panel is the content to be displayed when expanded -->
    <StackPanel Orientation="Horizontal">
        <StackPanel.Style>
            <Style TargetType="StackPanel">
                <Setter Property="Visibility" Value="Collapsed"/>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding ElementName=FilterExpander, Path=IsExpanded}" Value="True">
                        <Setter Property="Visibility" Value="Visible"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </StackPanel.Style>
        <CheckBox x:Name="chkFilterApproved" Content="Approved" Margin="5 0" Style="{StaticResource InlineCheckbox}" IsChecked="{Binding FilterApproved}" />
        <CheckBox x:Name="chkFilterOpen" Content="Open" Margin="5 0" Style="{StaticResource InlineCheckbox}" IsChecked="{Binding FilterOpen}" />
        <CheckBox x:Name="chkFilterCompleted" Content="Completed" Margin="5 0"  Style="{StaticResource InlineCheckbox}" IsChecked="{Binding FilterCompleted}"/>

    </StackPanel>

    <TextBox Style="{StaticResource EntryTextBox}" Tag="Enter search text" Margin="2" MinWidth="150" 
            Text="{Binding FilterSearch, UpdateSourceTrigger=PropertyChanged}"/>
</StackPanel>