nikobarli
Topic Author
Posts: 178
Joined: 26 Apr 2017, 06:23

Controls do not respond when put inside Expander Header

18 Oct 2017, 02:38

Hi,

If I put some controls inside an expander's header, the controls do not respond to any mouse events.
For example, with the below XAML, I cannot edit the text box.

Is it the expected behavior ? Is there any easy workaround ?
        <Expander>
            <Expander.Header>
                <TextBox>Header</TextBox>
            </Expander.Header>
        </Expander>
Thanks
 
User avatar
jsantos
Site Admin
Posts: 2904
Joined: 20 Jan 2012, 17:18
Contact:

Re: Controls do not respond when put inside Expander Header

18 Oct 2017, 04:15

is it working in XamlPlayer?

At first, I would say this is a problem with how you are rendering the off-screen and on-screen phases. Could you please paste code about it?
 
nikobarli
Topic Author
Posts: 178
Joined: 26 Apr 2017, 06:23

Re: Controls do not respond when put inside Expander Header

18 Oct 2017, 08:28

is it working in XamlPlayer?
No, it doesn't work either. Clicking at the textbox expands/shrinks the Expander, but I couldn't move the focus to the textbox and edit it.
At first, I would say this is a problem with how you are rendering the off-screen and on-screen phases. Could you please paste code about it?
Here is the code. m_dxUtil is our DirectX utility which manages the resources.
        void Render() {
            Noesis::IRenderer* renderer = m_view->GetRenderer();

            // Applies changes to the render tree
            bool changed = renderer->UpdateRenderTree();

            // Renders offscreen textures. This step must be done before binding the main render target
            if (changed) {
                if (renderer->NeedsOffscreen()) {
                    renderer->RenderOffscreen();
                }

                m_dxUtil->Render();
                renderer->Render();
                m_dxUtil->Present();
            }
        }
 
User avatar
sfernandez
Site Admin
Posts: 1912
Joined: 22 Dec 2011, 19:20

Re: Controls do not respond when put inside Expander Header

18 Oct 2017, 13:30

I found what is going on, it is a problem of how Expander template is designed.
The ContentPresenter that presents the Header is under a transparent ToggleButton used to Expand/Collapse the Expander control. So ToggleButton is receiving all the mouse events when clicking on the header area.

Could you please create a ticket in our bugtracker so we can fix our templates for the Expander control?

Meanwhile you can define your own template for the Expander to avoid that, something like this:
<!-- ExpanderToggleButton Style -->
<Style x:Key="ExpanderToggleButton" TargetType="{x:Type ToggleButton}" BasedOn="{StaticResource DefaultControlStyle}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Border Background="Transparent"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<!-- Expander Style -->
<Style TargetType="{x:Type Expander}" BasedOn="{StaticResource DefaultControlStyle}">
    <Setter Property="Background" Value="{StaticResource TrackBgBrush}"/>
    <Setter Property="BorderBrush" Value="{StaticResource TrackBdBrush}"/>
    <Setter Property="Padding" Value="4"/>
    <Setter Property="Focusable" Value="False"/>
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Expander}">
                <ControlTemplate.Resources>
                    <Geometry x:Key="CollapsedArrow">M0,0 L8,0 4,4 Z</Geometry>
                    <Geometry x:Key="ExpandedArrow">M0,4 L4,0 8,4 Z</Geometry>
                </ControlTemplate.Resources>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Border x:Name="Border"
                        Background="{StaticResource NormalBgBrush}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="1"
                        CornerRadius="1,1,0,0">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <ToggleButton x:Name="ExpanderButton"
                                Grid.Column="0" Grid.ColumnSpan="2" Margin="-1"
                                Style="{StaticResource ExpanderToggleButton}"
                                IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>
                            <Grid
                                Grid.Column="0"
                                Width="15"
                                Height="15"
                                Margin="1,0"
                                UseLayoutRounding="False"
                                IsHitTestVisible="False">
                                <Path x:Name="Arrow"
                                    Margin="3"
                                    Stretch="Fill"
                                    Fill="{StaticResource CheckBgBrush}"
                                    Data="{StaticResource CollapsedArrow}"/>
                            </Grid>
                            <ContentPresenter
                                Grid.Column="1"
                                Margin="0,4"
                                HorizontalAlignment="Left"
                                VerticalAlignment="Center"
                                ContentSource="Header"/>
                        </Grid>
                    </Border>
                    <Border x:Name="ContentBorder"
                        Grid.Row="1"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="1,0,1,1"
                        CornerRadius="0,0,1,1">
                        <ContentPresenter Margin="{TemplateBinding Padding}"/>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger SourceName="ExpanderButton" Property="IsMouseOver" Value="True">
                        <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource OverBdBrush}"/>
                        <Setter TargetName="Border" Property="Background" Value="{StaticResource OverBgBrush}"/>
                        <Setter Property="Foreground" Value="{StaticResource OverFgBrush}"/>
                    </Trigger>
                    <Trigger SourceName="ExpanderButton" Property="IsPressed" Value="True">
                        <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource PressBdBrush}"/>
                        <Setter TargetName="Border" Property="Background" Value="{StaticResource PressBgBrush}"/>
                        <Setter Property="Foreground" Value="{StaticResource OverFgBrush}"/>
                    </Trigger>
                    <Trigger SourceName="ExpanderButton" Property="IsKeyboardFocused" Value="True">
                        <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource FocusBdBrush}"/>
                    </Trigger>
                    <Trigger Property="IsExpanded" Value="False">
                        <Setter TargetName="Arrow" Property="Data" Value="{StaticResource ExpandedArrow}"/>
                        <Setter TargetName="ContentBorder" Property="Visibility" Value="Collapsed"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="Arrow" Property="Fill" Value="{StaticResource DisabledCheckBgBrush}"/>
                        <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBdBrush}"/>
                        <Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBgBrush}"/>
                        <Setter TargetName="ContentBorder" Property="BorderBrush" Value="{StaticResource DisabledBdBrush}"/>
                        <Setter TargetName="ContentBorder" Property="Background" Value="{StaticResource DisabledTrackBgBrush}"/>
                        <Setter Property="Foreground" Value="{StaticResource DisabledFgBrush}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
 
nikobarli
Topic Author
Posts: 178
Joined: 26 Apr 2017, 06:23

Re: Controls do not respond when put inside Expander Header

19 Oct 2017, 10:12

Thanks, I submitted the issue here: https://www.noesisengine.com/bugs/view.php?id=1165
 
User avatar
sfernandez
Site Admin
Posts: 1912
Joined: 22 Dec 2011, 19:20

Re: Controls do not respond when put inside Expander Header

23 Oct 2017, 10:55

Thanks for the report.

Who is online

Users browsing this forum: Google [Bot] and 2 guests