Expander ExpandDirection Property has no effect

01 Aug 2017, 07:44

My intention was to use an expander expanding to the left. However, when running the software, the ExpandDirection property seems to make no difference at all, the expander keeps to remain topdown, no matter what the property is set to. Compiling / building with VS 2017 within a C++ project. I also tried without the Width property being set to auto. Same effect.

Here is the code snippet, and I can't see anythign being incorrect, thanks in advance for assistance!

<UserControl
    x:Class="SideExpander"
    x:Name="ViewAccessor"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    UseLayoutRounding="True"
>
    <Grid>
        <Expander ExpandDirection="Left" Margin="0,8,0,0" Width="auto" Height="120">
            <ListView Name="ViewsList" DataContext="{StaticResource viewListData}" ItemsSource="{Binding ViewEntries}">
                <ListView.View>
                    <GridView>
                        <GridViewColumn Header="View reference" Width="120"  DisplayMemberBinding="{Binding ViewName}" />
                    </GridView>
                </ListView.View>
            </ListView>
        </Expander>
    </Grid>
</UserControl>

Caller:

<SideExpander x:Name="sideExpander" Grid.Column="2" Grid.Row="1"/>

01 Aug 2017, 12:14

Hello,

Unfortunately our provided defualt styles don't use the ExpandDirection property and only a drop down expand template is available (see NoesisStyle.xaml). But you can use it as base to design the other expand directions and just apply the new templates as Style triggers:

<Style TargetType="Expander">
  <Style.Triggers>
    <Trigger Property="ExpandDirection" Value="Left">
      <Setter Property="Template" Value="{StaticResource LeftExpanderTemplate}"/>
    </Trigger>
    <Trigger Property="ExpandDirection" Value="Right">
      <Setter Property="Template" Value="{StaticResource RightExpanderTemplate}"/>
    </Trigger>
    <Trigger Property="ExpandDirection" Value="Down">
      <Setter Property="Template" Value="{StaticResource DownExpanderTemplate}"/>
    </Trigger>
    <Trigger Property="ExpandDirection" Value="Up">
      <Setter Property="Template" Value="{StaticResource UpExpanderTemplate}"/>
    </Trigger>
  </Style.Triggers>
</Style>

Anyway, please report this issue to our bugtracker and we will include them in future releases.

Thanks.

01 Aug 2017, 13:04

Greetings and thanks for the reply. Might I ask what the StaticResource Tempaltes look like? *side information: My user defined control is derived from class UserControl, not from Expander).
Thanks in advance,
Andy

Edit: IOW Do I have to write the implementation completely on my own?

01 Aug 2017, 16:37

Might I ask what the StaticResource Tempaltes look like?

For example, the template defined in SimpleStyle.xaml for a drop down Expander looks like this:

<ControlTemplate TargetType="{x:Type Expander}">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Border
            Name="Border"
            Grid.Row="0"
            Background="{StaticResource NormalBrush}"
            BorderBrush="{StaticResource NormalBorderBrush}"
            BorderThickness="1"
            CornerRadius="2,2,0,0">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="20"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <ToggleButton
                    Name="ExpanderButton"
                    Background="{StaticResource NormalBrush}"
                    OverridesDefaultStyle="True"
                    Template="{StaticResource ExpanderToggleButton}" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>
                <ContentPresenter
                    Grid.Column="1"
                    Margin="4"
                    ContentSource="Header"/>
            </Grid>
        </Border>
        <Border
            Name="Content"
            Grid.Row="1"
            Background="{StaticResource WindowBackgroundBrush}"
            BorderBrush="{StaticResource SolidBorderBrush}"
            BorderThickness="1,0,1,1"
            CornerRadius="0,0,2,2">
            <ContentPresenter Margin="4"/>
        </Border>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsExpanded" Value="False">
            <Setter TargetName="Content" Property="Visibility" Value="Collapsed"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

*side information: My user defined control is derived from class UserControl, not from Expander.

It's ok, the only requirement is that you define the new template before the Expander contained in the UserControl, for example in the Resources of the UserControl:

<UserControl
    x:Class="SideExpander"
    x:Name="ViewAccessor"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    UseLayoutRounding="True"
>
  <UserControl.Resources>
    <ControlTemplate x:Key="LeftExpanderTemplate" TargetType="Expander">
      ...
    </ControlTemplate>
  </UserControl.Resources>
  <Grid>
    <Expander ExpandDirection="Left" Template="{StaticResource LeftExpanderTemplate}" .../>
    ...
  </Grid>
</UserControl>

02 Aug 2017, 10:55

Hi and thanks again, I will have a look into the suggested code.

A second problem now arises when following this example, as my Expander internally uses a ListView:
https://www.noesisengine.com/docs/Gui.C ... orial.html

I cannot get the TextBlock binding working (Binding Path=ViewEntryName in the source code below). Any hint, why?
In addition, all BaseComponents seem to be invisible/unresolved in xaml files such as DataModel3 in the above mentioned link.

<UserControl
    x:Class="EnscapeUiDescription.SideExpander"
    x:Name="ViewAccessor"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    UseLayoutRounding="True"
>
   
    <Grid>

        <Grid.Resources>
            <DataTemplate x:Key="ViewsListTemplate">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="{Binding Path=ViewEntryName}" Margin="2, 2, 2, 2" Grid.Column="1" />
                </Grid>
            </DataTemplate>
        </Grid.Resources>
        <Expander ExpandDirection="Left" Margin="0,8,0,0" Width="auto" Height="120">
            <ListView Name="ViewsList" ItemsSource="{Binding Path=ViewListAccessor, Mode=OneWay}" ItemTemplate="{StaticResource ViewsListTemplate}" />
        </Expander>

    </Grid>

</UserControl>

P.S.: I tried with declaring ViewEntryName an NsProp in both the set Data context and in the c++ class holding the data for the entries... both times unresolved...

02 Aug 2017, 11:48

Our current implementation of ListView requires that View property is correctly set, as you did in the first post, otherwise nothing is rendered.

<Expander ExpandDirection="Left" Margin="0,8,0,0" Width="auto" Height="120">
  <ListView Name="ViewsList" DataContext="{StaticResource viewListData}" ItemsSource="{Binding ViewEntries}">
    <ListView.View>
      <GridView>
        <GridViewColumn Header="View reference" Width="120"  DisplayMemberBinding="{Binding ViewName}" />
      </GridView>
    </ListView.View>
  </ListView>
</Expander>

Or if you are not showing several columns of information per item, then you can use a simpler container like ListBox instead:

<Expander ExpandDirection="Left" Margin="0,8,0,0" Width="auto" Height="120">
  <ListBox Name="ViewsList" ItemsSource="{Binding Path=ViewListAccessor, Mode=OneWay}" ItemTemplate="{StaticResource ViewsListTemplate}" />
</Expander>

02 Aug 2017, 12:21

Hi again,
using your code assumes that the StaticResource viewListData is accessible, but, as mentioned before, the underlying BaseComponent cannot be seen, iow viewListData is unresolved when adding a line such as <MyEntries x:Name="viewListData" /> (or <DataModel3 x:Name="dataModel" /> in the example). Hence I cannot even set this resource at all...
Regards,
Andy

EDIT: GOT IT WORKING! Thanks for the GridView hint!

02 Aug 2017, 12:58

I was only paying attention to the controls when copy-pasting, not the bindings and data context. You should set those appropriately so bindings can be resolved.

To use a StaticResource you should have defined it previously in the xaml inside the Resources property of any ancestor:

<UserControl
    x:Class="EnscapeUiDescription.SideExpander"
    x:Name="ViewAccessor"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    UseLayoutRounding="True"
>
   
    <Grid>

        <Grid.Resources>

            <MyEntries x:Key="viewListData"/>

            <DataTemplate x:Key="ViewsListTemplate">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="{Binding Path=ViewEntryName}" Margin="2, 2, 2, 2" Grid.Column="1" />
                </Grid>
            </DataTemplate>
        </Grid.Resources>

        <Expander ExpandDirection="Left" Margin="0,8,0,0" Width="auto" Height="120">
            <ListView Name="ViewsList" DataContext="{StaticResource viewListData}" ItemsSource="{Binding ViewEntries}">
                <ListView.View>
                    <GridView>
                        <GridViewColumn Header="View reference" Width="120"  DisplayMemberBinding="{Binding ViewName}" />
                    </GridView>
                </ListView.View>
            </ListView>
        </Expander>
    </Grid>
</UserControl>

Viewing that xaml, I assume MyEntries class exposes a property named ViewEntries that is a collection of items, and each item in that collection is a class that exposes a property named ViewName.

Great to hear it is working now.

02 Aug 2017, 15:02

Sorry to bother you again,

but your example for the Expander template contains a StaticResource "ExpanderToggleButton" -- above the fact that this resource is unresolved, is there only on toggle button implementation, too? That is, will I have to implement my own ExpanderLeftHeaderStyle? That would just delegate the problem further...

Thanks again for the greath assistance,
Andy

04 Aug 2017, 12:28

The template for the expander toggle button can also be found in SimpleStyle.xaml. Depending on the visual appearance you want to accomplish you can reuse that template or you would need a new one for each direction.

For example, using a layout transform to rotate the header you can reuse the same toggle button template:

: expander-left.png (9.43 KiB) Viewed 1828 times

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid.Resources>
        <ControlTemplate x:Key="ExpanderToggleButton" TargetType="{x:Type ToggleButton}">
            <Border
                Name="Border"
                Background="Transparent"
                BorderBrush="Gray"
                BorderThickness="1"
                Margin="-1,-1,0,-1"
                CornerRadius="2,0,0,0">
                <Path
                    Name="Arrow"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Data="M 0 0 L 4 4 L 8 0 Z"
    				UseLayoutRounding="False"
                    Fill="Black"/>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter TargetName="Border" Property="Background" Value="DarkGray"/>
                </Trigger>
                <Trigger Property="IsPressed" Value="true">
                    <Setter TargetName="Border" Property="Background" Value="DimGray"/>
                    <Setter TargetName="Border" Property="BorderBrush" Value="Black"/>
                </Trigger>
                <Trigger Property="IsChecked" Value="true">
                    <Setter TargetName="Arrow" Property="Data" Value="M 0 4 L 4 0 L 8 4 Z"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Grid.Resources>
    <StackPanel Orientation="Horizontal" Margin="100" VerticalAlignment="Top">
        <Expander Header="Ellipse" Width="200" Height="200" Foreground="Black">
            <Expander.Template>
                <ControlTemplate TargetType="{x:Type Expander}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Border
                            Name="Border"
                            Grid.Row="0"
                            Background="LightGray"
                            BorderBrush="Gray"
                            BorderThickness="1"
                            CornerRadius="2,2,0,0">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="20"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <ToggleButton
                                    Name="ExpanderButton"
                                    Background="LightGray"
                                    OverridesDefaultStyle="True"
                                    Template="{StaticResource ExpanderToggleButton}"
                                    IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>
                                <ContentPresenter
                                    Grid.Column="1"
                                    Margin="4"
                                    ContentSource="Header"/>
                            </Grid>
                        </Border>
                        <Border
                            Name="Content"
                            Grid.Row="1"
                            Background="White"
                            BorderBrush="Gray"
                            BorderThickness="1,0,1,1"
                            CornerRadius="0,0,2,2">
                            <ContentPresenter Margin="4"/>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsExpanded" Value="False">
                            <Setter TargetName="Content" Property="Visibility" Value="Collapsed"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Expander.Template>
            <Ellipse Fill="Blue" Height="100"/>
        </Expander>
        <Expander Header="Ellipse" Width="200" Height="200" Margin="20,0,0,0" Foreground="Black">
            <Expander.Template>
                <ControlTemplate TargetType="{x:Type Expander}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Border
                            Name="Border"
                            Grid.Column="0"
                            Background="LightGray"
                            BorderBrush="Gray"
                            BorderThickness="1"
                            CornerRadius="2,2,0,0">
                            <Border.LayoutTransform>
                                <RotateTransform Angle="-90"/>
                            </Border.LayoutTransform>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="20"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <ToggleButton
                                    Name="ExpanderButton"
                                    Background="LightGray"
                                    OverridesDefaultStyle="True"
                                    Template="{StaticResource ExpanderToggleButton}"
                                    IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>
                                <ContentPresenter
                                    Grid.Column="1"
                                    Margin="4"
                                    ContentSource="Header"/>
                            </Grid>
                        </Border>
                        <Border
                            Name="Content"
                            Grid.Column="1"
                            Background="White"
                            BorderBrush="Gray"
                            BorderThickness="0,1,1,1"
                            CornerRadius="0,0,2,2">
                            <ContentPresenter Margin="4"/>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsExpanded" Value="False">
                            <Setter TargetName="Content" Property="Visibility" Value="Collapsed"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Expander.Template>
            <Ellipse Fill="Blue" Width="100"/>
        </Expander>
    </StackPanel>
</Grid>

Expander ExpandDirection Property has no effect

Expander ExpandDirection Property has no effect

Re: Expander ExpandDirection Property has no effect

Re: Expander ExpandDirection Property has no effect

Re: Expander ExpandDirection Property has no effect

Re: Expander ExpandDirection Property has no effect

Re: Expander ExpandDirection Property has no effect

Re: Expander ExpandDirection Property has no effect

Re: Expander ExpandDirection Property has no effect

Re: Expander ExpandDirection Property has no effect

Re: Expander ExpandDirection Property has no effect

Who is online