Как выровнять TexBlocks в WPF Expander Header

Question

У меня есть несколько Texblock в заголовке Expander. Я хочу, чтобы эти текстовые блоки были выровнены влево, вправо и по центру.

Как мне этого добиться?

Пожалуйста, помогите ...

Спасибо

Sharath

Текст красным должен быть выровнен по левому краю, синий - по центру, зеленый - по правому краю

Пожалуйста, скопируйте код в XAMLPad.Exe

Answer 1

Причина, по которой вы не можете просто использовать панель «Сетка» или «Док» с TextBlocks для управления выравниванием, заключается в том, что стандартный шаблон Expander по левому краю выравнивает содержимое заголовка, а не позволяет ему растягиваться.

Есть два способа обойти это. Вы можете указать ширину содержимого заголовка расширителя или задать новый шаблон для расширителя.

Второй вариант, вероятно, лучший, но он также сложнее в реализации. Если у вас есть Expression Blend, вы можете щелкнуть правой кнопкой мыши элемент Expander в дереве Объекты и временная шкала и выбрать Редактировать элементы управления -> Редактировать копию ... Как только вы это сделаете потребуется также изменить шаблон HeaderSite (на этот раз вы можете выбрать Редактировать шаблон вместо создания копии). После этого вы можете просто установить Stretch для горизонтального выравнивания и добавить немного поля справа и все готово.

Если у вас нет Expression Blend, обновите вопрос, чтобы указать это, и я опубликую пример кода. Основная причина, по которой я этого не сделал, состоит в том, что шаблон содержит около 250 строк кода, и я не хотел создавать много шума без причины.

Учитывая ответ, который вы дали, я предполагаю, что у вас нет Blend. Если вы поместите следующий XAML в XAML Pad, вы увидите пример Expander, который позволит содержимому заголовка охватывать всю ширину 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="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>

Answer 2

Пожалуйста, скопируйте код в XAMLPad.Exe

Текст красным должен быть выровнен по левому краю, синий - по центру, а зеленый - по правому краю

Пожалуйста, ответьте.

Спасибо

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
  <Grid>
  <Expander HorizontalAlignment="Stretch" VerticalAlignment="Top" Grid.ColumnSpan="8" Grid.Row="2">
                        <Expander.Header>
                            <TextBlock>
                             <InlineUIContainer> 
                                    <TextBlock Text="Summary" Foreground="Red" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" />
                            </InlineUIContainer>
                                  <Run Text=" "/> 
                              <InlineUIContainer>  
                                    <TextBlock Text="Duration:" TextWrapping="Wrap" Foreground="Blue" HorizontalAlignment="Left" VerticalAlignment="Center"/>
                               </InlineUIContainer> 
                                 <Run Text=" "/> 
                                 <InlineUIContainer>  
                                    <TextBlock Text="1" TextWrapping="Wrap" Foreground="Blue" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="23,0,0,0"/>
                               </InlineUIContainer> 
                                 <InlineUIContainer>  
                                    <TextBlock Text=" Years" TextWrapping="Wrap"  Foreground="Blue"  HorizontalAlignment="Left" VerticalAlignment="Center"/>
                               </InlineUIContainer> 
                                   <Run Text=" "/> 
                                 <InlineUIContainer>  
                                    <TextBlock Text="Status:" TextWrapping="Wrap"   Foreground="Green"  HorizontalAlignment="Left" VerticalAlignment="Center"/>
                               </InlineUIContainer> 
                                    <Run Text=" "/> 
                                 <InlineUIContainer>  
                                    <TextBlock Text="Approved" TextWrapping="Wrap"  Foreground="Green"  HorizontalAlignment="Left" VerticalAlignment="Center"/>
                               </InlineUIContainer> 
                                    </TextBlock>
                        </Expander.Header>
                        <TextBlock Text="Testing1....." Background="#FFFFFFFF" Margin="0,4,0,0" TextWrapping="Wrap"/>
                    </Expander>
  </Grid>
</Page>