J'ai plusieurs Texblock dans l'en-tête Expander. Je veux que ces TextBlocks soient alignés sur Gauche, Droite et Centre.Comment aligner TexBlocks dans l'en-tête WPF Expander
Comment puis-je y parvenir?
S'il vous plaît aider ...
Merci
Sharath
Le texte en rouge devrait être aligné à gauche, celle en bleu devrait être Aligné au centre et le vert devrait être aligné à droite
Veuillez copier le code dans XAMLPad.Exe
La raison pour laquelle vous ne pouvez pas simplement utiliser une grille ou un panneau Dock avec les TextBlocks pour contrôler l'alignement est parce que le modèle par défaut de Expander aligne gauche le contenu d'en-tête au lieu de permettre pour s'étirer.
Il y a deux façons de contourner cela. Vous pouvez spécifier une largeur pour le contenu de l'en-tête de l'Expander ou définir un nouveau modèle pour l'expandeur.
La deuxième option est probablement la meilleure, mais c'est aussi la plus difficile à implémenter. Si vous avez Expression Blend alors vous pouvez cliquer droit sur l'élément Expander dans l'arbre Objects and Timeline et sélectionnez Edit Control Parts -> Modifier une copie ... Une fois que vous avez fait cela, vous devrez modifier le HeaderSite Le modèle (vous pouvez également sélectionner Modifier le modèle cette fois-ci au lieu de créer une copie). Une fois que vous êtes là, vous pouvez à peu près le définir à Stretch pour l'alignement horizontal et ajouter un peu de marge à droite et votre fait.
Si vous ne disposez pas d'Expression Blend, mettez à jour la question pour spécifier cela et je publierai un exemple de code. La principale raison pour laquelle je n'ai pas fait cela ici est que le modèle contient environ 250 lignes de code et je n'ai pas voulu générer beaucoup de bruit sans raison. Étant donné la réponse que vous avez donnée, je devine que vous n'avez pas de mélange. Si vous mettez le XAML suivant dans le pad XAML, vous devriez voir un exemple d'un Expander qui permettra au contenu de l'en-tête de couvrir toute la largeur de l'Expander.Vous souhaiterez probablement déplacer les ressources de la page dans un dictionnaire de ressources distinct afin de pouvoir le réutiliser dans l'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>
Vous n'avez répondu à aucune question que j'ai eue mais j'ai utilisé votre style après avoir passé 2 heures à essayer de trouver un bug dans le mien. Je vous remercie! Les Ups sont sur moi! – Brad
S'il vous plaît copiez le code dans XAMLPad.Exe
Le texte en rouge devrait être aligné à gauche, celle en bleu devrait être Aligné au centre et le vert devrait être aligné à droite
S'il vous plaît répondre.
Merci
<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>
J'ai ajouté quelques exemples XAML à ma réponse. –