如何修改wpf Expander以使扩展器按钮位于标题文本旁边并居中对齐并向下扩展

时间:2015-03-12 10:30:44

标签: wpf xaml

我想自定义扩展程序

我有一个网格,其中一个列是扩展器,在扩展器按钮之前带有头文本。并且扩展器应该扩展并填充整行,如图所示。

我无法发布图片,因此链接位于下方。

http://i.stack.imgur.com/zVkpR.png

可以请有人给我一些想法如何实现这一目标。

更新 我已经使用了控制模板,并且能够根据需要进行修改,但有一件事情是如何使扩展部分填充包含网格的整行。

以下是示例代码:

<Window x:Class="ExpanderStyles.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">

    <Window.Resources>
        <Style x:Key="ExpanderHeaderStyle"
            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"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="19"></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <Path x:Name="arrow" Grid.Column="1"
                                        HorizontalAlignment="Center"
                                        VerticalAlignment="Center"
                                        Stroke="{TemplateBinding Foreground}"
                                        StrokeThickness="1.5"
                                        SnapsToDevicePixels="false"
                                        Data="M 2,8 L 5.5,4.5 L 2,1">
                                    <Path.LayoutTransform>
                                        <RotateTransform Angle="0"/>
                                    </Path.LayoutTransform>
                                </Path>
                                <ContentPresenter Grid.Column="0"
                                                Margin="0,4,0,0"
                                                HorizontalAlignment="Center"
                                                VerticalAlignment="Top"
                                                SnapsToDevicePixels="True"
                                                RecognizesAccessKey="True"/>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked"
                                    Value="true">
                                <Setter Property="Data"
                                    Value="M 1,4.5  L 4.5,1  L 8,4.5"
                                    TargetName="arrow"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="{x:Type Expander}"
            TargetType="{x:Type Expander}">
            <Setter Property="Foreground"
                Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/>
            <Setter Property="Background"
                Value="Transparent"/>
            <Setter Property="HorizontalContentAlignment"
                Value="Center"/>
            <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">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="19"/>
                                    <RowDefinition Height="Auto"></RowDefinition>
                                </Grid.RowDefinitions>
                                <Canvas HorizontalAlignment="Center">
                                    <ToggleButton x:Name="HeaderSite"
                                            Margin="1"
                                            MinWidth="0"
                                            MinHeight="0"
                                            Style="{StaticResource ExpanderHeaderStyle}"
                                            IsChecked="{Binding Path=IsExpanded,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
                                            Content="{TemplateBinding Header}"
                                            ContentTemplate="{TemplateBinding HeaderTemplate}"
                                            ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"
                                            Foreground="{TemplateBinding Foreground}"
                                            Padding="{TemplateBinding Padding}"
                                            FontFamily="{TemplateBinding FontFamily}"
                                            FontSize="{TemplateBinding FontSize}"
                                            FontStyle="{TemplateBinding FontStyle}"
                                            FontStretch="{TemplateBinding FontStretch}"
                                            FontWeight="{TemplateBinding FontWeight}"
                                            HorizontalContentAlignment="Center"
                                            VerticalContentAlignment="Center"/>
                                </Canvas>
                                <ContentPresenter Grid.Row="1" x:Name="ExpandSite"
                                                DockPanel.Dock="Bottom"
                                                Visibility="Collapsed"
                                                Focusable="false"
                                                HorizontalAlignment="Stretch"
                                                VerticalAlignment="Stretch"
                                                Margin="{TemplateBinding Padding}">

                                </ContentPresenter>

                            </Grid>

                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsExpanded"
                                    Value="true">
                                <Setter Property="Visibility"
                                    Value="Visible"
                                    TargetName="ExpandSite"/>
                            </Trigger>

                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid HorizontalAlignment="Stretch">
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="100"/>
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Column="0" Grid.Row="0">Column 1</TextBlock>
        <Expander Grid.Row="0" Grid.Column="1" Header="Details" ExpandDirection="Left">
            <Grid Background="Blue">
                <TextBlock Text="Details content" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="5" Foreground="White"></TextBlock>
            </Grid>
        </Expander>
        <TextBlock Grid.Column="2" Grid.Row="0">Column 3</TextBlock>



    </Grid>
</Window>

任何团体都知道如何从控件模板中填充父网格行?

0 个答案:

没有答案