扩展器头文本对齐

时间:2012-04-15 17:08:17

标签: wpf xaml layout expander

因此,我将扩展器的方向更改为垂直对齐而不是水平对齐,但在关闭状态下,扩展器标题文本水平对齐。请告诉我有一种方法可以在没有表达混合等的情况下轻松解决这个问题。

<Expander Header="My Header"> 

我希望垂直AlignHeaderText之类的东西,但我看不到它的选择?有没有人有不同的方式可以“展示”我?

所以从指导H.B那里拿走了,我提出了这个:

    <StackPanel Orientation="Horizontal" Margin="0,0,342,0" Width="318">
            <StackPanel.Triggers>
                <EventTrigger RoutedEvent="Expander.Expanded" SourceName="expander1">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation From="0" To="1.2" Duration="0:0:0.45" Storyboard.TargetName="content" Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleX)"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </StackPanel.Triggers>
            <Expander ExpandDirection="Right" Name="expander1" OpacityMask="#6C806969" Background="#FF807171">
                <Expander.LayoutTransform>
                    <RotateTransform Angle="90"></RotateTransform>
                </Expander.LayoutTransform>
                <Expander.Header>
                    <TextBlock
                   Text="HEADER"
                   Width="{Binding
                    RelativeSource={RelativeSource
                      Mode=FindAncestor,
                      AncestorType={x:Type Expander}},
                    Path=ActualWidth}"
                  />
                </Expander.Header>
                <Grid x:Name="content" Background="#FF807171" Width="178">
                    <Grid.LayoutTransform>
                        <ScaleTransform ScaleX="0" ScaleY="1"/>
                    </Grid.LayoutTransform>
                </Grid>

            </Expander>

不幸的是它对扩展器这样做了:

enter image description here

它将文本放在顶部,按钮放在中间,我希望顶部的按钮和按钮后的文本?

如果我将Path=ActualWidth更改为Height,按钮会向上移动,但标题文字仍然在按钮的左侧而不是在按钮下方?

3 个答案:

答案 0 :(得分:3)

我的解决方案(没有其他属性) - 基于 H.B。 Sheikh Neyamat 答案:

<Expander ExpandDirection="Right">
  <Expander.Header>
    <TextBlock Text="Header">
      <TextBlock.LayoutTransform>
        <RotateTransform Angle="90"/>
      </TextBlock.LayoutTransform>
    </TextBlock>
  </Expander.Header>
  // Content - listbox in my case
</Expander>

答案 1 :(得分:2)

通过element syntaxTextBlock指定为Header并应用RotateTransform作为TextBlock的{​​{3}}来获取轮播。如果您想要LayoutTransform

的垂直文字

答案 2 :(得分:1)

支持上述建议的示例here