Cannot Access Second Defined XAML Toolkit Expander on WinUI 3. #4740

berkbb · 2022-08-12T10:23:41Z

berkbb
Aug 12, 2022

Describe the bug

Hi,
I'm developing a WinUI 3 app with CommunityToolkit.WinUI.UI.Controls v 7.1.2. I used this toolkit Expander for hide some UI elements. I hide / show elements with code behind when page size changed. My UI is :

<Page x:Class="BBCase.Views.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:toolkit="using:CommunityToolkit.WinUI.UI.Controls"
      Background="#fafafa"
      mc:Ignorable="d">

    <Grid x:Name="ContentArea">
        <!--Content Grid-->
        <Grid.RowDefinitions>
            <RowDefinition Height="32" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>

            <ColumnDefinition  Width="0.4*" />
            <ColumnDefinition Width="0.6*" />

        </Grid.ColumnDefinitions>
        <!--Header-->

        <TextBlock x:Name="MainHeader"
                   Grid.Row="0"
                   Foreground="#343434"
                   FontSize="12"
                   FontWeight="SemiBold"
                   Margin="10,0,0,10"
                   Opacity="60" />


        <!--Master List-->
        <ListView x:Name="ItemsList"
                  Grid.Row="1"
                  Grid.Column="0"
                  HorizontalAlignment="Stretch"
                  VerticalAlignment="Top"
                  Foreground="Black"
                  Margin="0,10,0,0">
            <ListView.Resources>
                <SolidColorBrush x:Key="ListViewItemBackgroundSelected"
                                 Color="#00ffbf" />
                <SolidColorBrush x:Key="ListViewItemBackgroundSelectedPointerOver"
                                 Color="#ffbf00" />
                <SolidColorBrush x:Key="ListViewItemBackgroundPointerOver"
                                 Color="#ffbf00" />
            </ListView.Resources>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <!--Master-->
                    <Grid Grid.Row="1"
                          CornerRadius="20"
                          MaxHeight="80">

                        <Border  BorderBrush="#e2e2e2"
                                 BorderThickness="0,0,0,1"
                                 Margin="50,0,0,0" />



                        <!--Commit Grid-->
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />


                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>

                                <ColumnDefinition Width="32" />
                                <ColumnDefinition Width="*" />


                            </Grid.ColumnDefinitions>
                            <!--Git Decoration at here-->
                            <Rectangle Stroke="#0040ff"
                                       StrokeThickness="2"
                                       Width="2"
                                       MinHeight="32"
                                       MaxHeight="64"
                                       Grid.Row="0"
                                       Grid.Column="0"
                                       Visibility="{Binding ShowTopLine}" />
                            <Ellipse Width="16"
                                     Height="16"
                                     Stroke="#343434"
                                     StrokeThickness="2"
                                     Grid.Row="1"
                                     Grid.Column="0" />
                            <Rectangle Stroke="#0040ff"
                                       StrokeThickness="2"
                                       Width="2"
                                       MinHeight="32"
                                       MaxHeight="64"
                                       Grid.Row="2"
                                       Grid.Column="0"
                                       Visibility="{Binding ShowBottomLine}" />

                            <!--Commit Header Grid-->
                            <Grid Grid.Row="0"
                                  Grid.RowSpan="3"
                                  Grid.Column="1">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>

                                <Grid.ColumnDefinitions>

                                    <ColumnDefinition Width="64" />
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="*" />


                                </Grid.ColumnDefinitions>
                                <!--Profile Image-->
                                <Image Grid.Row="0"
                                       Grid.RowSpan="2"
                                       Grid.Column="0"
                                       Width="48"
                                       Height="48">

                                    <Image.Source>
                                        <BitmapImage UriSource="{Binding Comitter.Image}" />
                                    </Image.Source>
                                </Image>
                                <Grid Grid.Column="1"
                                      Grid.Row="0"
                                      Margin="10,0,5,0">

                                    <Grid.ColumnDefinitions>

                                        <ColumnDefinition Width="auto" />
                                        <ColumnDefinition Width="auto" />


                                    </Grid.ColumnDefinitions>
                                    <toolkit:Expander  x:Name="tooLongExpander"
                                                       Grid.Column="1"
                                                       Background="Transparent"
                                                       IsExpanded="False"
                                                       ExpandDirection="Right"
                                                       Foreground="#343434">

                                        <ListView x:Name="CommitChipList"
                                                  Grid.Row="0"
                                                  ItemsSource="{Binding CommitChips}"
                                                  SelectionMode="None"
                                                  Margin="5,-5,0,0"
                                                  Padding="0">
                                            <ListView.ItemsPanel>
                                                <ItemsPanelTemplate>
                                                    <StackPanel Orientation="Horizontal" />
                                                </ItemsPanelTemplate>
                                            </ListView.ItemsPanel>

                                            <ListView.ItemTemplate>
                                                <DataTemplate>

                                                    <Border Background="{Binding ColorHex}"
                                                            CornerRadius="10"
                                                            Margin="-10,0,0,0">
                                                        <TextBlock Text="{Binding Title}"
                                                                   Foreground="{Binding Foreground}"
                                                                   HorizontalAlignment="Center"
                                                                   HorizontalTextAlignment="Center"
                                                                   TextAlignment="Center"></TextBlock>
                                                    </Border>

                                                </DataTemplate>
                                            </ListView.ItemTemplate>
                                        </ListView>
                                    </toolkit:Expander>


                                    <TextBlock Grid.Column="0"
                                               Text="{Binding Comitter.FullName}"
                                               TextWrapping="Wrap"
                                               TextTrimming="CharacterEllipsis"
                                               Foreground="#343434"
                                               Opacity="0.7"
                                               FontWeight="Medium"
                                               HorizontalAlignment="Left"
                                               TextAlignment="Left"
                                               HorizontalTextAlignment="Left" />



                                </Grid>

                                <!--Short Info-->
                                <Grid Grid.Row="1"
                                      Grid.Column="1"
                                      Grid.ColumnSpan="2">

                                    <Grid.ColumnDefinitions>


                                        <ColumnDefinition Width="auto" />
                                        <ColumnDefinition Width="*" />


                                    </Grid.ColumnDefinitions>
                                    <TextBlock Grid.Column="0"
                                               Margin="10,0,10,0"
                                               Text="{Binding CommitHashwithSix}"
                                               TextWrapping="Wrap"
                                               TextTrimming="CharacterEllipsis"
                                               Foreground="#343434"
                                               Opacity="0.7"
                                               FontFamily="Consolas"
                                               FontWeight="SemiBold"
                                               HorizontalAlignment="Left"
                                               TextAlignment="Left"
                                               HorizontalTextAlignment="Left"></TextBlock>
                                    <TextBlock Grid.Column="1"
                                               Margin="10,0,10,0"
                                               Text="{Binding CommitAbstract}"
                                               TextWrapping="Wrap"
                                               TextTrimming="CharacterEllipsis"
                                               Foreground="#343434"
                                               FontWeight="Bold"
                                               HorizontalAlignment="Left"
                                               TextAlignment="Left"
                                               HorizontalTextAlignment="Left"></TextBlock>

                                </Grid>
                                <!--Date-->
                                <Grid Grid.Row="0"
                                      Grid.Column="2">
                                    <TextBlock Grid.Column="0"
                                               Margin="10,0,10,0"
                                               Text="{Binding ShortCommitterDate}"
                                               TextWrapping="Wrap"
                                               TextTrimming="CharacterEllipsis"
                                               Foreground="DarkOliveGreen"
                                               FontSize="14"
                                               FontWeight="Medium"
                                               HorizontalAlignment="Right"
                                               TextAlignment="Right"
                                               HorizontalTextAlignment="Right"></TextBlock>

                                </Grid>
                            </Grid>
                        </Grid>
                    </Grid>

                </DataTemplate>
            </ListView.ItemTemplate>


        </ListView>




        <!--Separator-->
        <Border Grid.Row="1"
                Grid.Column="0"
                BorderBrush="#c0c0c0"
                Opacity="60"
                BorderThickness="0,0,1,0"
                Background="{x:Null}" />
        <!--Detail Grid-->
        <Grid Grid.Row="0"
              Grid.RowSpan="2"
              Grid.Column="1"
              Background="#fdfdfd">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto" />
                <RowDefinition Height="*" />


            </Grid.RowDefinitions>
            <!--Commit Git Detail Header-->
            <toolkit:Expander x:Name="gitMetaExpander"
                              Grid.Row="0"
                              Header="Open for details"
                              Background="#00ffbf"
                              Foreground="#343434"
                              IsExpanded="true"
                              HorizontalContentAlignment="Stretch"
                              VerticalContentAlignment="Stretch">
                <Grid Background="#fdfdfd">

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="auto" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="auto" />


                    </Grid.ColumnDefinitions>

                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />

                    </Grid.RowDefinitions>
                    <TextBlock Grid.Column="0"
                               Grid.Row="0"
                               Margin="10,5,10,10"
                               Text="Author"
                               TextWrapping="Wrap"
                               TextTrimming="CharacterEllipsis"
                               Foreground="#343434"
                               Opacity="0.7"
                               FontWeight="Medium"
                               HorizontalAlignment="Left"
                               TextAlignment="Left"
                               HorizontalTextAlignment="Left"></TextBlock>
                    <TextBlock Grid.Column="0"
                               Grid.Row="1"
                               Margin="10,0,10,10"
                               Text="Author Date"
                               TextWrapping="Wrap"
                               TextTrimming="CharacterEllipsis"
                               Foreground="#343434"
                               Opacity="0.7"
                               FontWeight="Medium"
                               HorizontalAlignment="Left"
                               TextAlignment="Left"
                               HorizontalTextAlignment="Left"></TextBlock>
                    <TextBlock Grid.Column="0"
                               Grid.Row="2"
                               Margin="10,0,10,10"
                               Text="Committer"
                               TextWrapping="Wrap"
                               TextTrimming="CharacterEllipsis"
                               Foreground="#343434"
                               Opacity="0.7"
                               FontWeight="Medium"
                               HorizontalAlignment="Left"
                               TextAlignment="Left"
                               HorizontalTextAlignment="Left"></TextBlock>
                    <TextBlock Grid.Column="0"
                               Grid.Row="3"
                               Margin="10,0,10,10"
                               Text="Committer Date"
                               TextWrapping="Wrap"
                               TextTrimming="CharacterEllipsis"
                               Foreground="#343434"
                               Opacity="0.7"
                               FontWeight="Medium"
                               HorizontalAlignment="Left"
                               TextAlignment="Left"
                               HorizontalTextAlignment="Left"></TextBlock>
                    <TextBlock Grid.Column="0"
                               Grid.Row="4"
                               Margin="10,0,10,10"
                               Text="Commit Hash"
                               TextWrapping="Wrap"
                               TextTrimming="CharacterEllipsis"
                               Foreground="#343434"
                               Opacity="0.7"
                               FontWeight="Medium"
                               HorizontalAlignment="Left"
                               TextAlignment="Left"
                               HorizontalTextAlignment="Left"></TextBlock>
                    <TextBlock Grid.Column="0"
                               Grid.Row="5"
                               Margin="10,0,10,10"
                               Text="Parent Hash"
                               TextWrapping="Wrap"
                               TextTrimming="CharacterEllipsis"
                               Foreground="#343434"
                               Opacity="0.7"
                               FontWeight="Medium"
                               HorizontalAlignment="Left"
                               TextAlignment="Left"
                               HorizontalTextAlignment="Left"></TextBlock>
                    <TextBlock Grid.Column="0"
                               Grid.Row="6"
                               Margin="10,0,10,10"
                               Text="Three Hash"
                               TextWrapping="Wrap"
                               TextTrimming="CharacterEllipsis"
                               Foreground="#343434"
                               Opacity="0.7"
                               FontWeight="Medium"
                               HorizontalAlignment="Left"
                               TextAlignment="Left"
                               HorizontalTextAlignment="Left"></TextBlock>

                    <TextBlock x:Name="authorText"
                               Grid.Column="1"
                               Grid.Row="0"
                               Margin="10,5,10,10"
                               TextWrapping="Wrap"
                               TextTrimming="CharacterEllipsis"
                               Foreground="#343434"
                               FontWeight="Medium"
                               HorizontalAlignment="Left"
                               TextAlignment="Left"
                               HorizontalTextAlignment="Left"></TextBlock>
                    <TextBlock x:Name="authorDateText"
                               Grid.Column="1"
                               Grid.Row="1"
                               Margin="10,0,10,10"
                               TextWrapping="Wrap"
                               TextTrimming="CharacterEllipsis"
                               Foreground="#343434"
                               FontWeight="Medium"
                               HorizontalAlignment="Left"
                               TextAlignment="Left"
                               HorizontalTextAlignment="Left"></TextBlock>
                    <TextBlock  x:Name="comitterText"
                                Grid.Column="1"
                                Grid.Row="2"
                                Margin="10,0,10,10"
                                TextWrapping="Wrap"
                                TextTrimming="CharacterEllipsis"
                                Foreground="#343434"
                                FontWeight="Medium"
                                HorizontalAlignment="Left"
                                TextAlignment="Left"
                                HorizontalTextAlignment="Left"></TextBlock>
                    <TextBlock  x:Name="comitterDateText"
                                Grid.Column="1"
                                Grid.Row="3"
                                Margin="10,0,10,10"
                                TextWrapping="Wrap"
                                TextTrimming="CharacterEllipsis"
                                Foreground="#343434"
                                FontWeight="Medium"
                                HorizontalAlignment="Left"
                                TextAlignment="Left"
                                HorizontalTextAlignment="Left"></TextBlock>
                    <TextBlock  x:Name="commithashText"
                                Grid.Column="1"
                                Grid.Row="4"
                                Margin="10,0,10,10"
                                TextWrapping="Wrap"
                                TextTrimming="CharacterEllipsis"
                                Foreground="#343434"
                                FontWeight="Medium"
                                HorizontalAlignment="Left"
                                TextAlignment="Left"
                                HorizontalTextAlignment="Left"></TextBlock>
                    <TextBlock  x:Name="parenthashtext"
                                Grid.Column="1"
                                Grid.Row="5"
                                Margin="10,0,10,10"
                                TextWrapping="Wrap"
                                TextTrimming="CharacterEllipsis"
                                Foreground="#343434"
                                FontWeight="Medium"
                                HorizontalAlignment="Left"
                                TextAlignment="Left"
                                HorizontalTextAlignment="Left"></TextBlock>
                    <TextBlock  x:Name="treehashtext"
                                Grid.Column="1"
                                Grid.Row="6"
                                Margin="10,0,10,10"
                                TextWrapping="Wrap"
                                TextTrimming="CharacterEllipsis"
                                Foreground="#343434"
                                FontWeight="Medium"
                                HorizontalAlignment="Left"
                                TextAlignment="Left"
                                HorizontalTextAlignment="Left"></TextBlock>

                    <Grid Grid.Column="2"
                          Grid.Row="0"
                          Grid.RowSpan="7">

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto" />
                            <ColumnDefinition Width="auto" />



                        </Grid.ColumnDefinitions>
                        <Image x:Name="CommitterImage"
                               Grid.Row="0"
                               Grid.RowSpan="2"
                               Grid.Column="0"
                               Width="128"
                               Height="128"
                               Margin="10,0,10,0" />



                        <Image x:Name="AuthorImage"
                               Grid.Row="0"
                               Grid.RowSpan="2"
                               Grid.Column="1"
                               Width="128"
                               Height="128"
                               Margin="10,0,10,0" />



                    </Grid>
                    <Border Grid.Row="7"
                            Grid.Column="0"
                            Grid.ColumnSpan="3"
                            BorderBrush="#e2e2e2"
                            BorderThickness="0,0,0,1" />
                </Grid>
            </toolkit:Expander>
            <!--Commit Git Detail Body-->
            <Grid Grid.Row="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />


                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="*" />


                </Grid.RowDefinitions>
                <StackPanel Margin="0,10,0,0"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Orientation="Horizontal"
                            Grid.Column="0"
                            Grid.ColumnSpan="2"
                            Grid.Row="0">
                    <Button Background="#e2e2e2"
                            Foreground="#343434"
                            Content="ROLLBACK"
                            CornerRadius="10,0,0,10"
                            BorderThickness="1,1,0,1">
                        <Button.Resources>
                            <ResourceDictionary>
                                <ResourceDictionary.ThemeDictionaries>
                                    <ResourceDictionary x:Key="Dark">
                                        <SolidColorBrush x:Key="ButtonForegroundPointerOver"
                                                         Color="#343434" />
                                        <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
                                                         Color="#00ffbf" />
                                        <SolidColorBrush x:Key="ButtonForegroundPressed"
                                                         Color="#343434" />
                                        <SolidColorBrush x:Key="ButtonBackgroundPressed"
                                                         Color="#ffbf00" />
                                    </ResourceDictionary>
                                    <ResourceDictionary x:Key="Light">
                                        <SolidColorBrush x:Key="ButtonForegroundPointerOver"
                                                         Color="#343434" />
                                        <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
                                                         Color="#00ffbf" />
                                        <SolidColorBrush x:Key="ButtonForegroundPressed"
                                                         Color="#343434" />
                                        <SolidColorBrush x:Key="ButtonBackgroundPressed"
                                                         Color="#ffbf00" />
                                    </ResourceDictionary>
                                </ResourceDictionary.ThemeDictionaries>
                            </ResourceDictionary>
                        </Button.Resources>
                    </Button>
                    <Button Background="#e2e2e2"
                            Foreground="#343434"
                            Content="REVERT"
                            BorderThickness="1"
                            CornerRadius="0">
                        <Button.Resources>
                            <ResourceDictionary>
                                <ResourceDictionary.ThemeDictionaries>
                                    <ResourceDictionary x:Key="Dark">
                                        <SolidColorBrush x:Key="ButtonForegroundPointerOver"
                                                         Color="#343434" />
                                        <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
                                                         Color="#00ffbf" />
                                        <SolidColorBrush x:Key="ButtonForegroundPressed"
                                                         Color="#343434" />
                                        <SolidColorBrush x:Key="ButtonBackgroundPressed"
                                                         Color="#ffbf00" />
                                    </ResourceDictionary>
                                    <ResourceDictionary x:Key="Light">
                                        <SolidColorBrush x:Key="ButtonForegroundPointerOver"
                                                         Color="#343434" />
                                        <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
                                                         Color="#00ffbf" />
                                        <SolidColorBrush x:Key="ButtonForegroundPressed"
                                                         Color="#343434" />
                                        <SolidColorBrush x:Key="ButtonBackgroundPressed"
                                                         Color="#ffbf00" />
                                    </ResourceDictionary>
                                </ResourceDictionary.ThemeDictionaries>
                            </ResourceDictionary>
                        </Button.Resources>
                    </Button>
                    <Button Background="#e2e2e2"
                            Foreground="#343434"
                            Content="DIFFTOOL"
                            CornerRadius="0,10,10,0"
                            BorderThickness="0,1,1,1">
                        <Button.Resources>
                            <ResourceDictionary>
                                <ResourceDictionary.ThemeDictionaries>
                                    <ResourceDictionary x:Key="Dark">
                                        <SolidColorBrush x:Key="ButtonForegroundPointerOver"
                                                         Color="#343434" />
                                        <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
                                                         Color="#00ffbf" />
                                        <SolidColorBrush x:Key="ButtonForegroundPressed"
                                                         Color="#343434" />
                                        <SolidColorBrush x:Key="ButtonBackgroundPressed"
                                                         Color="#ffbf00" />
                                    </ResourceDictionary>
                                    <ResourceDictionary x:Key="Light">
                                        <SolidColorBrush x:Key="ButtonForegroundPointerOver"
                                                         Color="#343434" />
                                        <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
                                                         Color="#00ffbf" />
                                        <SolidColorBrush x:Key="ButtonForegroundPressed"
                                                         Color="#343434" />
                                        <SolidColorBrush x:Key="ButtonBackgroundPressed"
                                                         Color="#ffbf00" />
                                    </ResourceDictionary>
                                </ResourceDictionary.ThemeDictionaries>
                            </ResourceDictionary>
                        </Button.Resources>
                    </Button>

                </StackPanel>

                <TextBlock  x:Name="CommitAbstractText"
                            Grid.Column="0"
                            Grid.ColumnSpan="2"
                            Grid.Row="1"
                            Margin="10"
                            TextWrapping="Wrap"
                            TextTrimming="CharacterEllipsis"
                            Foreground="#343434"
                            FontWeight="Bold"
                            FontSize="18"
                            HorizontalAlignment="Left"
                            TextAlignment="Left"
                            HorizontalTextAlignment="Left"></TextBlock>
                <Grid Grid.Column="0"
                      Grid.ColumnSpan="2"
                      Grid.Row="2">

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />


                    </Grid.ColumnDefinitions>

                    <Button  x:Name="ExpandButton"
                             Grid.Column="0"
                             Background="#e2e2e2"
                             Foreground="#343434"
                             Content="Expand All"
                             BorderThickness="1"
                             BorderBrush="Transparent"
                             HorizontalAlignment="Left"
                             Margin="10,0,0,10">
                        <Button.Resources>
                            <ResourceDictionary>
                                <ResourceDictionary.ThemeDictionaries>
                                    <ResourceDictionary x:Key="Dark">
                                        <SolidColorBrush x:Key="ButtonForegroundPointerOver"
                                                         Color="#343434" />
                                        <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
                                                         Color="#00ffbf" />
                                        <SolidColorBrush x:Key="ButtonForegroundPressed"
                                                         Color="#343434" />
                                        <SolidColorBrush x:Key="ButtonBackgroundPressed"
                                                         Color="#ffbf00" />
                                    </ResourceDictionary>
                                    <ResourceDictionary x:Key="Light">
                                        <SolidColorBrush x:Key="ButtonForegroundPointerOver"
                                                         Color="#343434" />
                                        <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
                                                         Color="#00ffbf" />
                                        <SolidColorBrush x:Key="ButtonForegroundPressed"
                                                         Color="#343434" />
                                        <SolidColorBrush x:Key="ButtonBackgroundPressed"
                                                         Color="#ffbf00" />
                                    </ResourceDictionary>
                                </ResourceDictionary.ThemeDictionaries>
                            </ResourceDictionary>
                        </Button.Resources>
                    </Button>
                    <TextBlock Grid.Column="1"
                               Margin="10,0,10,0"
                               Text="Showing X changed files with Y additions and Z deletions"
                               TextWrapping="Wrap"
                               TextTrimming="CharacterEllipsis"
                               Foreground="#343434"
                               Opacity="0.7"
                               FontWeight="Medium"
                               HorizontalAlignment="Right"
                               TextAlignment="Right"
                               HorizontalTextAlignment="right"></TextBlock>


                </Grid>
                <ListView SelectionMode="None"
                          Grid.Row="3"
                          Grid.Column="0"
                          Grid.ColumnSpan="2"
                          Foreground="#343434"
                          x:Name="ChangesList">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="auto"></ColumnDefinition>
                                    <ColumnDefinition Width="*"></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <Grid Grid.Column="0"
                                      Margin="10,0,10,0"
                                      Background="{Binding ColorHex}"
                                      Width="24"
                                      Height="24">
                                    <TextBlock Text="{Binding FirstChar}"
                                               Foreground="#343434"
                                               FontWeight="Bold"
                                               TextAlignment="Center"
                                               HorizontalAlignment="Center"
                                               HorizontalTextAlignment="Center"></TextBlock>
                                </Grid>
                                <toolkit:Expander Grid.Column="1"
                                                  Expanded="Expander_Expanded"
                                                  Collapsed="Expander_Collapsed"
                                                  Margin="0,10,0,10"
                                                  IsExpanded="{Binding IsExpanded}"
                                                  Header="{Binding FullTitle}"
                                                  Background="#fdfdfd"
                                                  Foreground="#343434"
                                                  HorizontalContentAlignment="Stretch"
                                                  VerticalContentAlignment="Stretch">

                                    <Grid  MinHeight="500">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="*"></RowDefinition>
                                            <RowDefinition Height="auto"></RowDefinition>
                                            <RowDefinition Height="*"></RowDefinition>
                                        </Grid.RowDefinitions>
                                        <Grid Grid.Row="0"
                                              Background="#c0c0c0"
                                              Opacity="0.6">
                                            <TextBlock Text="{Binding Original}"></TextBlock>
                                        </Grid>
                                        <Border Grid.Row="1"
                                                BorderBrush="red"
                                                Opacity="0.6"
                                                BorderThickness="0,0,1,0"
                                                Background="{x:Null}" />
                                        <Grid Grid.Row="2"
                                              Background="{Binding ColorHex}"
                                              Opacity="0.6">
                                            <TextBlock Text="{Binding Changes}"></TextBlock>
                                        </Grid>

                                    </Grid>
                                </toolkit:Expander>
                            </Grid>
                        </DataTemplate>
                    </ListView.ItemTemplate>

                </ListView>
            </Grid>
        </Grid>

    </Grid>
</Page>

I can access Expander x:Name="gitMetaExpander" from function directly. However I cannot access to Expander x:Name="chipsExpander" from function:

private void MainPage_SizeChanged(object sender, SizeChangedEventArgs e)
    {


        Debug.WriteLine($"Width:{e.NewSize.Width} Height :{e.NewSize.Height}");

        if (e.NewSize.Width < 800 || e.NewSize.Height < 600)
        {
            gitMetaExpander.IsExpanded = false;
            chipsExpander.IsExpanded = false; // Cannot access it.
            
            

        }

        else
        {

            gitMetaExpander.IsExpanded = true;
      chipsExpander.IsExpanded = true; // Cannot access it.

        }
    }

chipsExpander Definition:

 <toolkit:Expander  x:Name="chipsExpander"
                                                       Grid.Column="1"
                                                       Background="Transparent"
                                                       IsExpanded="False"
                                                       ExpandDirection="Right"
                                                       Foreground="#343434">

                                        <ListView x:Name="CommitChipList"
                                                  Grid.Row="0"
                                                  ItemsSource="{Binding CommitChips}"
                                                  SelectionMode="None"
                                                  Margin="5,-5,0,0"
                                                  Padding="0">
                                            <ListView.ItemsPanel>
                                                <ItemsPanelTemplate>
                                                    <StackPanel Orientation="Horizontal" />
                                                </ItemsPanelTemplate>
                                            </ListView.ItemsPanel>

                                            <ListView.ItemTemplate>
                                                <DataTemplate>

                                                    <Border Background="{Binding ColorHex}"
                                                            CornerRadius="10"
                                                            Margin="-10,0,0,0">
                                                        <TextBlock Text="{Binding Title}"
                                                                   Foreground="{Binding Foreground}"
                                                                   HorizontalAlignment="Center"
                                                                   HorizontalTextAlignment="Center"
                                                                   TextAlignment="Center"></TextBlock>
                                                    </Border>

                                                </DataTemplate>
                                            </ListView.ItemTemplate>
                                        </ListView>
                                    </toolkit:Expander>

Toolkit is defined also:

xmlns:toolkit="using:CommunityToolkit.WinUI.UI.Controls"

I saw.that, VS Designer cannot add "chipsExpander" to Mainpage.g.i.cs after build. It's as if single use is allowed with x:Name. Otherwise, I have Expanders without x:Name. This looks like an access issue.

Regression

No response

Reproducible in sample app?

This bug can be reproduced in the sample app.

Steps to reproduce

Create a blank WinUI 3 app with Windows 10 SDK 19041 and NuGet packages:
Id	Versions                                                                                                                                                                                                                                        
Newtonsoft.Json	{13.0.1}                                                                                                                                             
CommunityToolkit.Mvvm	{8.0.0}                                                                                                                                                      
CommunityToolkit.WinUI.UI.Controls	{7.1.2}                                                                                                                                                             
WinUIEx	{1.8.0}                                                                                                                                                             
Microsoft.Extensions.Hosting	{6.0.1}                                                                                                                                                             
Newtonsoft.Json	{13.0.1}                                                                                                                                                            
Microsoft.Xaml.Behaviors.WinUI.M...	{2.0.8}                                                                                                                                                             
Microsoft.WindowsAppSDK	{1.1.3}

Expected behavior

All toolkit UI elements with x:Name must be accessible form code behind.

Screenshots

Windows Build Number

Other Windows Build number

No response

App minimum and target SDK version

Windows 10, version 1809 (Build 17763)
Windows 10, version 1903 (Build 18362)
Windows 10, version 1909 (Build 18363)
Windows 10, version 2004 (Build 19041)
Other (specify)

Other SDK version

No response

Visual Studio Version

2022

Visual Studio Build Number

17.2.6

Device form factor

Desktop

Nuget packages

Id	Versions
Newtonsoft.Json	{13.0.1}
CommunityToolkit.Mvvm	{8.0.0}
CommunityToolkit.WinUI.UI.Controls	{7.1.2}
WinUIEx	{1.8.0}
Microsoft.Extensions.Hosting	{6.0.1}
Newtonsoft.Json	{13.0.1}
Microsoft.Xaml.Behaviors.WinUI.M...	{2.0.8}
Microsoft.WindowsAppSDK	{1.1.3}

Additional context

No response

Help us help you

Yes, but only if others can assist.

Answered by michael-hawker

Aug 25, 2022

@berkbb your Expander you call out is part of a DataTemplate here:

https://github.com/berkbb/tower_winui_case/blob/fbcbc31dbb701573f161d05c752e6d2f1cfca802/BBCase/Views/MainPage.xaml#L54-L55

You can't reference things in template in your code behind like that.

You should be using data Binding on a property on the item the template represents to tackle handling the expanded state. In your case you're really using this for some function of the size of the window, in which case you should use an adaptive state trigger for a Visual State Manager to toggle the property.

This isn't an issue with the Toolkit.

View full answer

ghost · 2022-08-12T10:23:46Z

ghost
Aug 12, 2022

Hello berkbb, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

0 replies

michael-hawker · 2022-08-15T21:48:08Z

michael-hawker
Aug 15, 2022
Maintainer

@berkbb I'm not sure if I follow your issue, there's a lot going on here. Can you provide a minimal set of information related to the issue you're seeing?

If you're trying to access controls that are part of an item template, you can't do that with x:Name from code-behind. You would need to use the VisualTreeHelper APIs to take your container/sender and find the Expander instance within the template.

So, I don't think there's anything specific to Expander going on here, but it's a bit hard to follow your scenario and where the problem is with the code you provided.

0 replies

berkbb · 2022-08-16T05:31:20Z

berkbb
Aug 16, 2022
Author

Hi. I am out of city without any PC now. I cannot send ant sample but you can clone the sample from https://github.com/berkbb/tower_winui_case. Thanks @michael-hawker

0 replies

berkbb · 2022-08-16T05:39:54Z

berkbb
Aug 16, 2022
Author

I can access components from code behind via x:Name except one expander. It is a little bit strange 😏 I commented the issue on MainPage.xaml.cs.

0 replies

michael-hawker · 2022-08-25T21:41:53Z

michael-hawker
Aug 25, 2022
Maintainer

@berkbb your Expander you call out is part of a DataTemplate here:

https://github.com/berkbb/tower_winui_case/blob/fbcbc31dbb701573f161d05c752e6d2f1cfca802/BBCase/Views/MainPage.xaml#L54-L55

You can't reference things in template in your code behind like that.

You should be using data Binding on a property on the item the template represents to tackle handling the expanded state. In your case you're really using this for some function of the size of the window, in which case you should use an adaptive state trigger for a Visual State Manager to toggle the property.

This isn't an issue with the Toolkit.

0 replies

berkbb · 2022-08-26T06:25:17Z

berkbb
Aug 26, 2022
Author

Hi @michael-hawker . I understand. But can you explain how can I use fist expander at code behind with x:Name ? The first expander is not in data template ? I'm using data bindings, I know that. Thanks.

1 reply

michael-hawker Aug 26, 2022
Maintainer

Converted to a discussion to make it easier to reply. @berkbb the ChipsExpander is the one you said was inaccessible and is the one in the DataTemplate. (I don't know what type of item you have in your list as there's no DataType specified on the DataTemplate.) You can try binding the expander's IsExpanded to a property on the data object if it's related to that item, but as I said, if it's related to the size of the viewport you'll need to a state trigger. Like the ControlSizeTrigger we have in the Toolkit: https://docs.microsoft.com/windows/communitytoolkit/helpers/triggers - like the AdaptiveTrigger you're trying to setup https://docs.microsoft.com/uwp/api/Windows.UI.Xaml.AdaptiveTrigger

See more about the VisualStateManager here: https://docs.microsoft.com/uwp/api/Windows.UI.Xaml.VisualStateManager

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cannot Access Second Defined XAML Toolkit Expander on WinUI 3. #4740

{{title}}

Replies: 6 comments 1 reply

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Cannot Access Second Defined XAML Toolkit Expander on WinUI 3. #4740

berkbb Aug 12, 2022

Describe the bug

Regression

Reproducible in sample app?

Steps to reproduce

Expected behavior

Screenshots

Windows Build Number

Other Windows Build number

App minimum and target SDK version

Other SDK version

Visual Studio Version

Visual Studio Build Number

Device form factor

Nuget packages

Additional context

Help us help you

Replies: 6 comments · 1 reply

ghost Aug 12, 2022

michael-hawker Aug 15, 2022 Maintainer

berkbb Aug 16, 2022 Author

berkbb Aug 16, 2022 Author

michael-hawker Aug 25, 2022 Maintainer

berkbb Aug 26, 2022 Author

michael-hawker Aug 26, 2022 Maintainer

berkbb
Aug 12, 2022

Replies: 6 comments 1 reply

ghost
Aug 12, 2022

michael-hawker
Aug 15, 2022
Maintainer

berkbb
Aug 16, 2022
Author

berkbb
Aug 16, 2022
Author

michael-hawker
Aug 25, 2022
Maintainer

berkbb
Aug 26, 2022
Author

michael-hawker Aug 26, 2022
Maintainer