如何对齐WPF扩展头中的TexBlocks [英] How to align TexBlocks in WPF Expander Header

查看:138
本文介绍了如何对齐WPF扩展头中的TexBlocks的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在扩展头中有多个Texblock。我希望这些TextBlocks对齐左,右和中心。



我该如何做到这一点?



请帮助...



谢谢

Sharath



红色文本应该左对齐,蓝色应居中对齐,绿色应右对齐



请将代码复制到XAMLPad.Exe









































解决方案

原因是您不能简单地使用Grid或Dock面板和TextBlocks控制对齐是因为Expander的默认模板左对齐了标题内容,而不是允许它伸展。



有两种解决方法。您可以为扩展器头部的内容指定一个宽度,也可以为扩展器定义一个新模板。



第二个选项可能是最好的,但它是也更难实施。如果您有Expression Blend,则可以右键单击对象和时间线树中的Expander元素,然后选择编辑控件部分 - >编辑副本... 完成后您还需要修改 HeaderSite 的模板(您可以选择 Edit Template 这次虽然不是创建副本)。一旦你在那里,你几乎可以将它设置为 Stretch 来进行水平对齐,并向右侧添加一点余量并完成。



如果你没有Expression Blend更新问题来指定,我会发布一些示例代码。我之所以没有这样做的主要原因是模板大约有250行代码,我不想毫无理由地产生大量噪音。



鉴于你给的答复,我猜你没有混合。如果将以下XAML放入XAML Pad中,则应该看到一个Expander的示例,该扩展器将使标头内容能够跨越扩展器的整个宽度。您很可能希望将页面的资源移动到单独的资源字典中,以便您可以在应用程序中重复使用它。

  < Page xmlns =http://schemas.microsoft.com/winfx/2006/xaml/presentation
xmlns:x =http://schemas.microsoft.com/winfx/2006/xaml
>
< Page.Resources>
< LinearGradientBrush x:Key =ExpanderArrowHoverFillEndPoint =0,1StartPoint =0,0>
< GradientStop Color =#FFF0F8FEOffset =0/>
< GradientStop Color =#FFE0F3FEOffset =0.3/>
< GradientStop Color =#FF6FA7C5Offset =1/>
< / LinearGradientBrush>
< LinearGradientBrush x:Key =ExpanderArrowPressedFillEndPoint =0,1StartPoint =0,0>
< GradientStop Color =#FFDCF0FAOffset =0/>
< GradientStop Color =#FFC5E6F7Offset =0.2/>
< GradientStop Color =#FF5690D0Offset =1/>
< / LinearGradientBrush>
< LinearGradientBrush x:Key =ExpanderArrowFillEndPoint =0,1StartPoint =0,0>
< GradientStop Color =WhiteOffset =0/>
< GradientStop Color =#FFBFBFBFOffset =0.5/>
< GradientStop Color =#FF878787Offset =1/>
< / LinearGradientBrush>
< Style x:Key =ExpanderRightHeaderStyleTargetType ={x:Type ToggleButton}>
< Setter Property =Template>
< Setter.Value>
< ControlTemplate TargetType ={x:Type ToggleButton}>
< Border Padding ={TemplateBinding Padding}>
< Grid SnapsToDevicePixels =FalseBackground =Transparent>
< Grid.RowDefinitions>
< RowDefinition Height =19/>
< RowDefinition Height =*/>
< /Grid.RowDefinitions>
<网格>
< Grid.LayoutTransform>
< TransformGroup>
< TransformGroup.Children>
< TransformCollection>
< RotateTransform Angle = - 90/>
< / TransformCollection>
< / TransformGroup>
< Ellipse Fill ={DynamicResource ExpanderArrowFill}Stroke =DarkGrayHorizo​​ntalAlignment =Centerx:Name =circleVerticalAlignment =CenterWidth =19Height =19/>
< / Grid>
< ContentPresenter Horizo​​ntalAlignment =CenterMargin =0,4,0,0VerticalAlignment =TopSnapsToDevicePixels =TrueGrid.Row =1RecognizesAccessKey =True/>
< / Grid>
< / Border>
< ControlTemplate.Triggers>
< Trigger Property =IsCheckedValue =true>
< Setter Property =DataTargetName =arrowValue =M 1,4.5 L 4.5,1 L 8,4.5/>
< /触发>
<触发属性=IsMouseOver值=true>
< Setter Property =StrokeTargetName =circleValue =#FF3C7FB1/>
< Setter Property =FillTargetName =circleValue ={DynamicResource ExpanderArrowHoverFill}/>
< Setter Property =StrokeTargetName =arrowValue =#222/>
< /触发>
<触发属性=IsPressed值=true>
< Setter Property =StrokeThicknessTargetName =circleValue =1.5/>
< Setter Property =FillTargetName =circleValue ={DynamicResource ExpanderArrowPressedFill}/>
< Setter Property =StrokeTargetName =arrowValue =#FF003366/>
< /触发>
< /ControlTemplate.Triggers>
< / ControlTemplate>
< / Setter>
< / style>
< Style x:Key =ExpanderUpHeaderStyleTargetType ={x:Type ToggleButton}>
< Setter Property =Template>
< Setter.Value>
< ControlTemplate TargetType ={x:Type ToggleButton}>
< Border Padding ={TemplateBinding Padding}>
< Grid SnapsToDevicePixels =FalseBackground =Transparent>
< Grid.ColumnDefinitions>
< ColumnDefinition Width =19/>
< ColumnDefinition Width =*/>
< /Grid.ColumnDefinitions>
<网格>
< Grid.LayoutTransform>
< TransformGroup>
< TransformGroup.Children>
< TransformCollection>
< RotateTransform Angle =180/>
< / TransformCollection>
< / TransformGroup>
< Ellipse Fill ={DynamicResource ExpanderArrowFill}Stroke =DarkGrayHorizo​​ntalAlignment =Centerx:Name =circleVerticalAlignment =CenterWidth =19Height =19/>
< / Grid>
< ContentPresenter Horizo​​ntalAlignment =StretchMargin =4,0,19,0VerticalAlignment =CenterSnapsToDevicePixels =TrueGrid.Column =1RecognizesAccessKey =True/>
< / Grid>
< / Border>
< ControlTemplate.Triggers>
< Trigger Property =IsCheckedValue =true>
< Setter Property =DataTargetName =arrowValue =M 1,4.5 L 4.5,1 L 8,4.5/>
< /触发>
<触发属性=IsMouseOver值=true>
< Setter Property =StrokeTargetName =circleValue =#FF3C7FB1/>
< Setter Property =FillTargetName =circleValue ={DynamicResource ExpanderArrowHoverFill}/>
< Setter Property =StrokeTargetName =arrowValue =#222/>
< /触发>
<触发属性=IsPressed值=true>
< Setter Property =StrokeThicknessTargetName =circleValue =1.5/>
< Setter Property =FillTargetName =circleValue ={DynamicResource ExpanderArrowPressedFill}/>
< Setter Property =StrokeTargetName =arrowValue =#FF003366/>
< /触发>
< /ControlTemplate.Triggers>
< / ControlTemplate>
< / Setter>
< / style>
< Style x:Key =ExpanderLeftHeaderStyleTargetType ={x:Type ToggleButton}>
< Setter Property =Template>
< Setter.Value>
< ControlTemplate TargetType ={x:Type ToggleButton}>
< Border Padding ={TemplateBinding Padding}>
< Grid SnapsToDevicePixels =FalseBackground =Transparent>
< Grid.RowDefinitions>
< RowDefinition Height =19/>
< RowDefinition Height =*/>
< /Grid.RowDefinitions>
<网格>
< Grid.LayoutTransform>
< TransformGroup>
< TransformGroup.Children>
< TransformCollection>
< RotateTransform Angle =90/>
< / TransformCollection>
< / TransformGroup>
< Ellipse Fill ={DynamicResource ExpanderArrowFill}Stroke =DarkGrayHorizo​​ntalAlignment =Centerx:Name =circleVerticalAlignment =CenterWidth =19Height =19/>
< / Grid>
< ContentPresenter Horizo​​ntalAlignment =CenterMargin =0,4,0,0VerticalAlignment =TopSnapsToDevicePixels =TrueGrid.Row =1RecognizesAccessKey =True/>
< / Grid>
< / Border>
< ControlTemplate.Triggers>
< Trigger Property =IsCheckedValue =true>
< Setter Property =DataTargetName =arrowValue =M 1,4.5 L 4.5,1 L 8,4.5/>
< /触发>
<触发属性=IsMouseOver值=true>
< Setter Property =StrokeTargetName =circleValue =#FF3C7FB1/>
< Setter Property =FillTargetName =circleValue ={DynamicResource ExpanderArrowHoverFill}/>
< Setter Property =StrokeTargetName =arrowValue =#222/>
< /触发>
<触发属性=IsPressed值=true>
< Setter Property =StrokeThicknessTargetName =circleValue =1.5/>
< Setter Property =FillTargetName =circleValue ={DynamicResource ExpanderArrowPressedFill}/>
< Setter Property =StrokeTargetName =arrowValue =#FF003366/>
< /触发>
< /ControlTemplate.Triggers>
< / ControlTemplate>
< / Setter>
< / style>
< Style x:Key =ExpanderHeaderFocusVisual>
< Setter Property =Control.Template>
< Setter.Value>
< ControlTemplate>
<边框>
< Rectangle Stroke =BlackStrokeDashArray =1 2StrokeThickness =1Margin =0SnapsToDevicePixels =true/>
< / Border>
< / ControlTemplate>
< / Setter>
< / style>
< Style x:Key =ExpanderDownHeaderStyleTargetType ={x:Type ToggleButton}>
< Setter Property =Template>
< Setter.Value>
< ControlTemplate TargetType ={x:Type ToggleButton}>
< Border Padding ={TemplateBinding Padding}>
< Grid SnapsToDevicePixels =FalseBackground =Transparent>
< Grid.ColumnDefinitions>
< ColumnDefinition Width =19/>
< ColumnDefinition Width =*/>
< /Grid.ColumnDefinitions>
< Ellipse Fill ={DynamicResource ExpanderArrowFill}Stroke =DarkGrayHorizo​​ntalAlignment =Centerx:Name =circleVerticalAlignment =CenterWidth =19Height =19/>
< ContentPresenter Horizo​​ntalAlignment =StretchMargin =4,0,19,0VerticalAlignment =CenterSnapsToDevicePixels =TrueGrid.Column =1RecognizesAccessKey =True/>
< / Grid>
< / Border>
< ControlTemplate.Triggers>
< Trigger Property =IsCheckedValue =true>
< Setter Property =DataTargetName =arrowValue =M 1,4.5 L 4.5,1 L 8,4.5/>
< /触发>
<触发属性=IsMouseOver值=true>
< Setter Property =StrokeTargetName =circleValue =#FF3C7FB1/>
< Setter Property =FillTargetName =circleValue ={DynamicResource ExpanderArrowHoverFill}/>
< Setter Property =StrokeTargetName =arrowValue =#222/>
< /触发>
<触发属性=IsPressed值=true>
< Setter Property =StrokeThicknessTargetName =circleValue =1.5/>
< Setter Property =FillTargetName =circleValue ={DynamicResource ExpanderArrowPressedFill}/>
< Setter Property =StrokeTargetName =arrowValue =#FF003366/>
< /触发>
< /ControlTemplate.Triggers>
< / ControlTemplate>
< / Setter>
< / style>
< Style x:Key =StretchExpanderStyleTargetType ={x:Type Expander}>
< Setter Property =ForegroundValue ={DynamicResource {x:Static SystemColors.ControlTextBrushKey}}/>
< Setter Property =BackgroundValue =Transparent/>
< Setter Property =Horizo​​ntalContentAlignmentValue =Stretch/>
< Setter Property =VerticalContentAlignmentValue =Stretch/>
< Setter Property =BorderBrushValue =Transparent/>
< Setter Property =BorderThicknessValue =1/>
< Setter Property =Template>
< Setter.Value>
< ControlTemplate TargetType ={x:Type Expander}>
< Border SnapsToDevicePixels =trueBackground ={TemplateBinding Background}BorderBrush ={TemplateBinding BorderBrush}BorderThickness ={TemplateBinding BorderThickness}CornerRadius =3>
< DockPanel>
< ToggleButton FocusVisualStyle ={StaticResource ExpanderHeaderFocusVisual}Margin =1MinHeight =0MinWidth =0x:Name =HeaderSiteStyle ={StaticResource ExpanderDownHeaderStyle}Content ={TemplateBinding TemplateBinding FontStyle ={TemplateBinding FontStyle}FontTemplate = FontWeight ={TemplateBinding FontWeight}Foreground ={TemplateBinding Foreground}Horizo​​ntalContentAlignment ={TemplateBinding Horizo​​ntalContentAlignment}Padding ={TemplateBinding Padding}VerticalContentAlignment ={TemplateBinding VerticalContentAlignment}DockPanel.Dock =TopIsChecked = {Binding Path = IsExpanded,Mode = TwoWay,RelativeSource = {RelativeSource TemplatedParent}}/>
< ContentPresenter Horizo​​ntalAlignment ={TemplateBinding Horizo​​ntalContentAlignment}Margin ={TemplateBinding Padding}x:Name =ExpandSiteVerticalAlignment ={TemplateBinding VerticalContentAlignment}Focusable =falseVisibility =CollapsedDockPanel。坞= 底部/>
< / DockPanel>
< / Border>
< ControlTemplate.Triggers>
<触发属性=IsExpandedValue =true>
< Setter Property =VisibilityTargetName =ExpandSiteValue =Visible/>
< /触发>
<触发属性=ExpandDirectionValue =Right>
< Setter Property =DockPanel.DockTargetName =ExpandSiteValue =Right/>
< Setter Property =DockPanel.DockTargetName =HeaderSiteValue =Left/>
< Setter Property =StyleTargetName =HeaderSiteValue ={StaticResource ExpanderRightHeaderStyle}/>
< /触发>
< Trigger Property =ExpandDirectionValue =Up>
< Setter Property =DockPanel.DockTargetName =ExpandSiteValue =Top/>
< Setter Property =DockPanel.DockTargetName =HeaderSiteValue =Bottom/>
< Setter Property =StyleTargetName =HeaderSiteValue ={StaticResource ExpanderUpHeaderStyle}/>
< /触发>
< Trigger Property =ExpandDirectionValue =Left>
< Setter Property =DockPanel.DockTargetName =ExpandSiteValue =Left/>
< Setter Property =DockPanel.DockTargetName =HeaderSiteValue =Right/>
< Setter Property =StyleTargetName =HeaderSiteValue ={StaticResource ExpanderLeftHeaderStyle}/>
< /触发>
<触发属性=IsEnabled值=假>
< Setter Property =ForegroundValue ={DynamicResource {x:Static SystemColors.GrayTextBrushKey}}/>
< /触发>
< /ControlTemplate.Triggers>
< / ControlTemplate>
< / Setter>
< / style>
<网格>
< Expander Width =500Style ={DynamicResource StretchExpanderStyle}>
< Expander.Header>
<网格>
< TextBlock DockPanel.Dock =LeftHorizo​​ntalAlignment =LeftText =LeftForeground =Red/>
< TextBlock Text =CenterHorizo​​ntalAlignment =CenterForeground =Blue/>
< TextBlock DockPanel.Dock =RightHorizo​​ntalAlignment =RightText =RightForeground =Green/>
< / Grid>
<! - 作为替代方案,您可以使用停靠面板。如以下所示 - >
<! - < DockPanel Horizo​​ntalAlignment =Stretch>
< TextBlock DockPanel.Dock =LeftText =LeftForeground =Red/>
< TextBlock DockPanel.Dock =RightText =RightForeground =Green/>
< TextBlock Text =CenterHorizo​​ntalAlignment =CenterForeground =Blue/>
< / DockPanel>
- >
< /Expander.Header>
某些内容.......
< / Expander>
< / Grid>
< / Page>


I have Multiple Texblock in Expander Header. I want these TextBlocks aligned to Left, Right and Center.

How can i achieve this?

Please Help...

Thanks

Sharath

The Text in Red should be left aligned, the one in blue should be center aligned and the green should be right aligned

Please copy the code in XAMLPad.Exe






解决方案

The reason that you can't simply use a Grid or Dock panel with the TextBlocks in to control the alignment is because the default template of Expander left aligns the header content instead of allowing it to stretch.

There are two ways around this. You can either specify a width for the content of the Expander's header or you can define a new template for the expander.

The second option is probably the best, but it is also the harder one to implement. If you have Expression Blend then you can right click the Expander element in the Objects and Timeline tree and select Edit Control Parts -> Edit a copy... Once you have done that you will need to modify the HeaderSite's template as well (you can select Edit Template this time though instead of creating a copy). Once your in there you can pretty much just set it to Stretch for horizontal alignment and add a bit of margin to the right and your done.

If you don't have Expression Blend update the question to specify that and I will post some sample code. The main reason I haven't done that here is that the template is about 250 lines of code and I didn't want to generate alot of noise for no reason.

Given the reply that you gave I am guessing you don't have Blend. If you put the following XAML into XAML Pad you should see an example of an Expander which will enable the header content to span the full width of the Expander. You will most likely want to move the resources for the page into a seperate resource dictionary so you can reuse it throught the application.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      >
      <Page.Resources>
        <LinearGradientBrush x:Key="ExpanderArrowHoverFill" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#FFF0F8FE" Offset="0"/>
            <GradientStop Color="#FFE0F3FE" Offset="0.3"/>
            <GradientStop Color="#FF6FA7C5" Offset="1"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="ExpanderArrowPressedFill" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#FFDCF0FA" Offset="0"/>
            <GradientStop Color="#FFC5E6F7" Offset="0.2"/>
            <GradientStop Color="#FF5690D0" Offset="1"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="ExpanderArrowFill" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="White" Offset="0"/>
            <GradientStop Color="#FFBFBFBF" Offset="0.5"/>
            <GradientStop Color="#FF878787" Offset="1"/>
        </LinearGradientBrush>
        <Style x:Key="ExpanderRightHeaderStyle" TargetType="{x:Type ToggleButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Border Padding="{TemplateBinding Padding}">
                            <Grid SnapsToDevicePixels="False" Background="Transparent">
                                <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 Fill="{DynamicResource ExpanderArrowFill}" Stroke="DarkGray" HorizontalAlignment="Center" x:Name="circle" VerticalAlignment="Center" Width="19" Height="19"/>
                                    <Path Stroke="#666" StrokeThickness="2" HorizontalAlignment="Center" x:Name="arrow" VerticalAlignment="Center" SnapsToDevicePixels="false" Data="M 1,1.5 L 4.5,5 L 8,1.5"/>
                                </Grid>
                                <ContentPresenter HorizontalAlignment="Center" Margin="0,4,0,0" VerticalAlignment="Top" SnapsToDevicePixels="True" Grid.Row="1" RecognizesAccessKey="True"/>
                            </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="Fill" TargetName="circle" Value="{DynamicResource ExpanderArrowHoverFill}"/>
                                <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="Fill" TargetName="circle" Value="{DynamicResource ExpanderArrowPressedFill}"/>
                                <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 SnapsToDevicePixels="False" Background="Transparent">
                                <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 Fill="{DynamicResource ExpanderArrowFill}" Stroke="DarkGray" HorizontalAlignment="Center" x:Name="circle" VerticalAlignment="Center" Width="19" Height="19"/>
                                    <Path Stroke="#666" StrokeThickness="2" HorizontalAlignment="Center" x:Name="arrow" VerticalAlignment="Center" SnapsToDevicePixels="false" Data="M 1,1.5 L 4.5,5 L 8,1.5"/>
                                </Grid>
                                <ContentPresenter HorizontalAlignment="Stretch" Margin="4,0,19,0" VerticalAlignment="Center" SnapsToDevicePixels="True" Grid.Column="1" RecognizesAccessKey="True"/>
                            </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="Fill" TargetName="circle" Value="{DynamicResource ExpanderArrowHoverFill}"/>
                                <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="Fill" TargetName="circle" Value="{DynamicResource ExpanderArrowPressedFill}"/>
                                <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 SnapsToDevicePixels="False" Background="Transparent">
                                <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 Fill="{DynamicResource ExpanderArrowFill}" Stroke="DarkGray" HorizontalAlignment="Center" x:Name="circle" VerticalAlignment="Center" Width="19" Height="19"/>
                                    <Path Stroke="#666" StrokeThickness="2" HorizontalAlignment="Center" x:Name="arrow" VerticalAlignment="Center" SnapsToDevicePixels="false" Data="M 1,1.5 L 4.5,5 L 8,1.5"/>
                                </Grid>
                                <ContentPresenter HorizontalAlignment="Center" Margin="0,4,0,0" VerticalAlignment="Top" SnapsToDevicePixels="True" Grid.Row="1" RecognizesAccessKey="True"/>
                            </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="Fill" TargetName="circle" Value="{DynamicResource ExpanderArrowHoverFill}"/>
                                <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="Fill" TargetName="circle" Value="{DynamicResource ExpanderArrowPressedFill}"/>
                                <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 Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1" Margin="0" SnapsToDevicePixels="true"/>
                        </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 SnapsToDevicePixels="False" Background="Transparent">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="19"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Ellipse Fill="{DynamicResource ExpanderArrowFill}" Stroke="DarkGray" HorizontalAlignment="Center" x:Name="circle" VerticalAlignment="Center" Width="19" Height="19"/>
                                <Path Stroke="#666" StrokeThickness="2" HorizontalAlignment="Center" x:Name="arrow" VerticalAlignment="Center" SnapsToDevicePixels="false" Data="M 1,1.5 L 4.5,5 L 8,1.5"/>
                                <ContentPresenter HorizontalAlignment="Stretch" Margin="4,0,19,0" VerticalAlignment="Center" SnapsToDevicePixels="True" Grid.Column="1" RecognizesAccessKey="True"/>
                            </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="Fill" TargetName="circle" Value="{DynamicResource ExpanderArrowHoverFill}"/>
                                <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="Fill" TargetName="circle" Value="{DynamicResource ExpanderArrowPressedFill}"/>
                                <Setter Property="Stroke" TargetName="arrow" Value="#FF003366"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="StretchExpanderStyle" 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 SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3">
                            <DockPanel>
                                <ToggleButton FocusVisualStyle="{StaticResource ExpanderHeaderFocusVisual}" Margin="1" MinHeight="0" MinWidth="0" x:Name="HeaderSite" Style="{StaticResource ExpanderDownHeaderStyle}" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" FontStretch="{TemplateBinding FontStretch}" FontStyle="{TemplateBinding FontStyle}" FontWeight="{TemplateBinding FontWeight}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" DockPanel.Dock="Top" IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>
                                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" x:Name="ExpandSite" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Focusable="false" Visibility="Collapsed" DockPanel.Dock="Bottom"/>
                            </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>
    </Page.Resources>
    <Grid>
        <Expander Width="500" Style="{DynamicResource StretchExpanderStyle}">
            <Expander.Header>
                <Grid>
                    <TextBlock DockPanel.Dock="Left" HorizontalAlignment="Left" Text="Left" Foreground="Red" />                                                                                      
                    <TextBlock Text="Center" HorizontalAlignment="Center" Foreground="Blue" />
                    <TextBlock DockPanel.Dock="Right" HorizontalAlignment="Right" Text="Right" Foreground="Green" />     
                </Grid>
                <!-- As an alternative you could use a dock panel. as shown by the following -->
                <!--<DockPanel HorizontalAlignment="Stretch">
                    <TextBlock DockPanel.Dock="Left" Text="Left" Foreground="Red" />                    
                    <TextBlock DockPanel.Dock="Right" Text="Right" Foreground="Green" />                                                   
                    <TextBlock Text="Center" HorizontalAlignment="Center" Foreground="Blue" />
                </DockPanel>
                -->                
            </Expander.Header>
            Some Content.......
        </Expander>
    </Grid>
</Page>

这篇关于如何对齐WPF扩展头中的TexBlocks的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆