2009-04-20 6 views
4

エキスパンダーヘッダーに複数のテクスタイルブロックがあります。これらのTextBlockをLeft、Right、Centerに揃えたいWPFエキスパンダーヘッダーでTexBlockを整列する方法

これをどのように達成できますか?

助けてください...

シャラス

おかげで赤のテキストは、整列ままにしておく必要があり、青の1が中央に整列しなければならないとグリーンは右

整列する必要があります

コードをXAMLPad.Exeにコピーしてください。






+0

私は私の答えにいくつかの例のXAMLを追加しました。 –

答えて

5

パンダのデフォルトのテンプレートが左代わりせるのヘッダーの内容を整列させるため、あなたは、単に位置合わせを制御するためにテキストブロックとグリッド又はドックパネルを使用することができない理由はそれは伸びる。

これには2つの方法があります。 Expanderのヘッダーの内容の幅を指定するか、エクスパンダーの新しいテンプレートを定義することができます。

おそらく2番目のオプションが最適ですが、実装するのが難しい場合もあります。 Expression Blendをお持ちの場合は、のオブジェクトとタイムラインツリーのExpander要素を右クリックし、を編集するコントロールの編集 - >コピーを編集...完了したらHeaderSiteを変更する必要があります。あなたのテンプレートも同様です(今度は編集テンプレートをコピーを作成する代わりに選択できます)。ちょうどそこにあなたがかなり多くをちょうどにそれを置くことができる水平に整列させるために伸ばしそして右に少しマージンを加えなさい。

Expression Blendをお持ちでない場合は、それを指定する質問を更新し、サンプルコードをいくつか投稿します。私がここで行っていない主な理由は、テンプレートが約250行のコードであり、何の理由もなくノイズをたくさん生成したくないということです。

私があなたに与えた返信があれば、あなたはブレンドしていないと思います。次の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> 
+0

あなたは私が持っていた質問に答えなかったが、自分のバグを見つけようと2時間を過ごした後にあなたのスタイルを使いました。ありがとうございました!アップは私の上にある! – Brad

0

返信してください赤のテキストは、整列ままにしておく必要があり、青の1が中央に整列しなければならないとグリーンは右

を整列する必要があります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> 
関連する問題