将扩展器的标头设为ToggleButton

时间:2012-09-03 15:34:18

标签: wpf xaml expander

我正在尝试使用Expanders和StackPanels在WPF中创建一个手风琴样式菜单。

我希望能够单击Expander Header并显示StackPanel而不显示Arrow。当我点击箭头时这是有效的,但我想删除箭头。

当我从Expander的ToggleButton中删除'Arrow'属性时,ToggleButton是Content Presenter下方的一小块区域,用户无法点击。

有没有办法让扩展器的整个Header(包括Text)成为ToggleButton?

在Expander的模板中,我有以下内容:

<ToggleButton IsChecked="{Binding Path=IsExpanded,Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" 
                                              OverridesDefaultStyle="True"  Template="{StaticResource ExpanderToggleButton}" Background="{StaticResource NormalBrush}" 
                                              Height="25">
                                </ToggleButton>
                                <ContentPresenter Margin="4" ContentSource="Header" RecognizesAccessKey="True" />

和'ExpanderToggleButton':

<ControlTemplate x:Key="ExpanderToggleButton" TargetType="ToggleButton">
        <Border Name="Border" CornerRadius="2,0,0,0" Background="Transparent" BorderBrush="{StaticResource NormalBorderBrush}" BorderThickness="0,0,1,0">
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="ToggleButton.IsMouseOver" Value="true">
                <Setter TargetName="Border" Property="Background" Value="Red" />
            </Trigger>
            <Trigger Property="IsPressed" Value="true">
                <Setter TargetName="Border" Property="Background" Value="{StaticResource PressedBrush}" />
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
                <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
                <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

1 个答案:

答案 0 :(得分:0)

单独指定标题模板,如;

<Expander>
  <Expander.Header>
    .... (This is where your toggle button currently sits any way in a default template)
  </Expander.Header>
  <Expander.Content>
    ....
  </Expander.Content>
</Expander>

这样您的标题模板就会收到与切换按钮相同的Mouse Down事件,并且它会应用于标题中显示的内容。