none
How to expand and collapse Expander Control when user moves mouse cursor on expander control's togglebutton RRS feed

  • Question

  • I want to expand and collapse Expander control without clicking togglebutton control.

    It will act like a menu. When user puts mouse cursor on expander control's ToggleButton, it expands and collapses when user takes mouse away from togglebutton.

     

    I used ControlTemplate to access ToggleButton's events but I need those events to be raised in my custom control so that I can code whatever I want.

     

    Wednesday, February 20, 2008 9:49 PM

Answers

  • The following code shows how to expand and collapse Expander control by mouse hovering over its Header:

    Code Snippet
    <Grid
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:System="clr-namespace:System;assembly=mscorlib">
    <
    Grid.Resources>
    <
    ControlTemplate x:Key="ExpanderControlTemplate1" TargetType="{x:Type Expander}">
    <
    Border BorderThickness="1" BorderBrush="Purple" CornerRadius="5">
    <
    DockPanel>
    <
    ContentPresenter
    Visibility="Collapsed"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch"
    Margin="{TemplateBinding Padding}"
    DockPanel.Dock="Bottom"
    x:Name="ExpandSite"
    Content="{TemplateBinding Content}"
    ContentTemplate="{TemplateBinding ContentTemplate}"
    ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"/>
    <
    ContentPresenter
    Visibility="Visible"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch"
    Margin="{TemplateBinding Padding}"
    Focusable="False"
    DockPanel.Dock="Top"
    x:Name="HeaderSite"
    Content="{TemplateBinding Header}"/>
    </
    DockPanel>
    </
    Border>
    <
    ControlTemplate.Triggers>
    <
    Trigger Property="IsMouseOver" Value="True" SourceName="HeaderSite">
    <
    Setter Property="Visibility" Value="Visible" TargetName="ExpandSite"/>
    </
    Trigger>
    <
    Trigger Property="IsMouseOver" Value="True" SourceName="ExpandSite">
    <
    Setter Property="Visibility" Value="Visible" TargetName="ExpandSite"/>
    </
    Trigger>
    </
    ControlTemplate.Triggers>
    </
    ControlTemplate>
    </
    Grid.Resources>

    <
    StackPanel HorizontalAlignment="Center" Margin="5">
    <
    Expander Background="Green" Width="243"
    Template="{DynamicResource ExpanderControlTemplate1}"
    Header="Expander"
    IsExpanded="True">
    <
    Button Background="Green" Content="Button" Width="243" Height="243"/>
    </
    Expander>
    </
    StackPanel>
    </
    Grid>

    For the question on how to expose the events belonging to the templated element, simply speaking, you don't need to do that, because in WPF, events will either be bubbling up or tunneling down the element tree, which means that you can simply specify the event handler using the following code:

    <Expander ToggleButton.MouseDown="ToggleButton_MouseDown"/>

    And the mouse down event will bubble up the element tree, so that the handler registered against Expander element could be invoked to do the processing.

    Hope this helps

    Tuesday, February 26, 2008 9:30 AM

All replies

  • I need to have Expander control 's ToggleButton events in my custom control.

    I used ControlTemplate to access ToggleButton but facing difficulty to expose ToggleButton's events on the client side (WPF Application)

     

    Plz help.

     

    Thanks so much in advance.

    Wednesday, February 20, 2008 9:36 PM
  • The following code shows how to expand and collapse Expander control by mouse hovering over its Header:

    Code Snippet
    <Grid
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:System="clr-namespace:System;assembly=mscorlib">
    <
    Grid.Resources>
    <
    ControlTemplate x:Key="ExpanderControlTemplate1" TargetType="{x:Type Expander}">
    <
    Border BorderThickness="1" BorderBrush="Purple" CornerRadius="5">
    <
    DockPanel>
    <
    ContentPresenter
    Visibility="Collapsed"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch"
    Margin="{TemplateBinding Padding}"
    DockPanel.Dock="Bottom"
    x:Name="ExpandSite"
    Content="{TemplateBinding Content}"
    ContentTemplate="{TemplateBinding ContentTemplate}"
    ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"/>
    <
    ContentPresenter
    Visibility="Visible"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch"
    Margin="{TemplateBinding Padding}"
    Focusable="False"
    DockPanel.Dock="Top"
    x:Name="HeaderSite"
    Content="{TemplateBinding Header}"/>
    </
    DockPanel>
    </
    Border>
    <
    ControlTemplate.Triggers>
    <
    Trigger Property="IsMouseOver" Value="True" SourceName="HeaderSite">
    <
    Setter Property="Visibility" Value="Visible" TargetName="ExpandSite"/>
    </
    Trigger>
    <
    Trigger Property="IsMouseOver" Value="True" SourceName="ExpandSite">
    <
    Setter Property="Visibility" Value="Visible" TargetName="ExpandSite"/>
    </
    Trigger>
    </
    ControlTemplate.Triggers>
    </
    ControlTemplate>
    </
    Grid.Resources>

    <
    StackPanel HorizontalAlignment="Center" Margin="5">
    <
    Expander Background="Green" Width="243"
    Template="{DynamicResource ExpanderControlTemplate1}"
    Header="Expander"
    IsExpanded="True">
    <
    Button Background="Green" Content="Button" Width="243" Height="243"/>
    </
    Expander>
    </
    StackPanel>
    </
    Grid>

    For the question on how to expose the events belonging to the templated element, simply speaking, you don't need to do that, because in WPF, events will either be bubbling up or tunneling down the element tree, which means that you can simply specify the event handler using the following code:

    <Expander ToggleButton.MouseDown="ToggleButton_MouseDown"/>

    And the mouse down event will bubble up the element tree, so that the handler registered against Expander element could be invoked to do the processing.

    Hope this helps

    Tuesday, February 26, 2008 9:30 AM
  • Thanks for your help.

     

    I tried <Expander ToggleButton.MouseDown="ToggleButton_MouseDown"/> but it's not accepting ToggleButton.MouseDown. When I type ToggleButton., it shows 3 members in the intellisense.

     

    1. Checked

    2. Intermediate

    3. Unchecked

     

    Not the ones relevant to Mouse events (MouseOver or MouseEnter etc.).

     

    Should it be assign in ControlTemplate?

     

    Once I got this working, I will use it to expand and collapse expander (when mouse comes over toggle button)

     

    - Thanks again

     

     


    Monday, March 3, 2008 8:03 PM
  • That's a really of good help.. great solution... works perfectly as expected...

    Thank you.


    Thursday, August 1, 2013 2:44 PM