TwoPaneView TemplateBinding issue

Current behavior

TwoPaneView TemplateBinding issue, TemplateBinding is invalid in Pane1 无标题无标题1

The problem comes from Uno CommunityToolkit WinUI UI Controls The ListDetailsView control of Layout is invalid in uno because when using TwoPaneView in the template, TemplateBinding cannot be bound in Pane1 and Pane2

Expected behavior

<Style TargetType="controls:ListDetailsView">
    <Setter Property="Background" Value="{ThemeResource ApplicationPageBackgroundThemeBrush}" />
    <Setter Property="BorderBrush" Value="{ThemeResource ApplicationForegroundThemeBrush}" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="controls:ListDetailsView">
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
        <!--ListPaneBackground = Black-->
        <!--DetailsPaneBackground = Green-->
                    <TwoPaneView x:Name="RootPanel"
                                      MinWideModeWidth="{TemplateBinding CompactModeThresholdWidth}"
                                      PanePriority="Pane1"
                                      TallModeConfiguration="SinglePane"
                                      WideModeConfiguration="LeftRight"
                                 Background="{TemplateBinding ListPaneBackground}"
                                  >
                        <TwoPaneView.Pane1>
            <Grid x:Name="ttt" Background="{TemplateBinding DetailsPaneBackground}"
                  Height="200" Width="300" BorderBrush="Red" BorderThickness="2" />

          </TwoPaneView.Pane1>
          <TwoPaneView.Pane2>
            <Grid />
          </TwoPaneView.Pane2>
                    </TwoPaneView>

                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

ttt is Green

            <Grid x:Name="ttt" Background="{TemplateBinding DetailsPaneBackground}"
                  Height="200" Width="300" BorderBrush="Red" BorderThickness="2" />

How to reproduce it (as minimally and precisely as possible)

No response

Workaround

No response

Works on UWP/WinUI

None

Environment

No response

NuGet package version(s)

<PackageVersion Include="Uno.WinUI" Version="5.0.19" />
<PackageVersion Include="Uno.CommunityToolkit.WinUI.UI.Controls.Layout" Version="7.1.200" />

Affected platforms

WebAssembly, Android, iOS, macOS (AppKit), Mac Catalyst, Skia (WPF), Skia (GTK on Linux/macOS/Windows), Skia (Linux Framebuffer)

IDE

Visual Studio 2022

IDE version

No response

Relevant plugins

No response

Anything else we need to know?

No response

Take effect after rewriting the template


  <Style x:Key="MyTwoPaneViewStyle" TargetType="TwoPaneView">
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="VerticalAlignment" Value="Stretch" />
    <Setter Property="MinWideModeWidth" Value="641"/>
    <Setter Property="MinTallModeHeight" Value="641"/>
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="TwoPaneView">
          <Grid x:Name="RootGrid" Background="{TemplateBinding Background}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <VisualStateManager.VisualStateGroups>
              <VisualStateGroup x:Name="ModeStates">
                <VisualState x:Name="ViewMode_LeftRight"/>

                <VisualState x:Name="ViewMode_RightLeft">
                  <VisualState.Setters>
                    <contract7NotPresent:Setter Target="PART_Pane1.(Grid.Column)" Value="2"/>
                    <contract7NotPresent:Setter Target="PART_Pane2.(Grid.Column)" Value="0"/>

                    <contract7Present:Setter Target="PART_Pane1ScrollViewer.(Grid.Column)" Value="2"/>
                    <contract7Present:Setter Target="PART_Pane2ScrollViewer.(Grid.Column)" Value="0"/>
                  </VisualState.Setters>
                </VisualState>

                <VisualState x:Name="ViewMode_TopBottom">
                  <VisualState.Setters>
                    <contract7NotPresent:Setter Target="PART_Pane1.(Grid.Column)" Value="0"/>
                    <contract7NotPresent:Setter Target="PART_Pane1.(Grid.Row)" Value="0"/>

                    <contract7NotPresent:Setter Target="PART_Pane2.(Grid.Column)" Value="0"/>
                    <contract7NotPresent:Setter Target="PART_Pane2.(Grid.Row)" Value="2"/>

                    <contract7Present:Setter Target="PART_Pane1ScrollViewer.(Grid.Column)" Value="0"/>
                    <contract7Present:Setter Target="PART_Pane1ScrollViewer.(Grid.Row)" Value="0"/>

                    <contract7Present:Setter Target="PART_Pane2ScrollViewer.(Grid.Column)" Value="0"/>
                    <contract7Present:Setter Target="PART_Pane2ScrollViewer.(Grid.Row)" Value="2"/>
                  </VisualState.Setters>
                </VisualState>

                <VisualState x:Name="ViewMode_BottomTop">
                  <VisualState.Setters>
                    <contract7NotPresent:Setter Target="PART_Pane1.(Grid.Column)" Value="0"/>
                    <contract7NotPresent:Setter Target="PART_Pane1.(Grid.Row)" Value="2"/>

                    <contract7NotPresent:Setter Target="PART_Pane2.(Grid.Column)" Value="0"/>
                    <contract7NotPresent:Setter Target="PART_Pane2.(Grid.Row)" Value="0"/>

                    <contract7Present:Setter Target="PART_Pane1ScrollViewer.(Grid.Column)" Value="0"/>
                    <contract7Present:Setter Target="PART_Pane1ScrollViewer.(Grid.Row)" Value="2"/>

                    <contract7Present:Setter Target="PART_Pane2ScrollViewer.(Grid.Column)" Value="0"/>
                    <contract7Present:Setter Target="PART_Pane2ScrollViewer.(Grid.Row)" Value="0"/>
                  </VisualState.Setters>
                </VisualState>

                <VisualState x:Name="ViewMode_OneOnly">
                  <VisualState.Setters>
                    <contract7NotPresent:Setter Target="PART_Pane2.Visibility" Value="Collapsed"/>

                    <contract7Present:Setter Target="PART_Pane2ScrollViewer.Visibility" Value="Collapsed"/>
                  </VisualState.Setters>
                </VisualState>

                <VisualState x:Name="ViewMode_TwoOnly">
                  <VisualState.Setters>
                    <contract7NotPresent:Setter Target="PART_Pane1.Visibility" Value="Collapsed"/>
                    <contract7NotPresent:Setter Target="PART_Pane2.(Grid.Column)" Value="0"/>

                    <contract7Present:Setter Target="PART_Pane1ScrollViewer.Visibility" Value="Collapsed"/>
                    <contract7Present:Setter Target="PART_Pane2ScrollViewer.(Grid.Column)" Value="0"/>
                  </VisualState.Setters>
                </VisualState>
              </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>

            <Grid.ColumnDefinitions>
              <ColumnDefinition x:Name="PART_ColumnLeft" Width="Auto"/>
              <ColumnDefinition x:Name="PART_ColumnMiddle" Width="0"/>
              <ColumnDefinition x:Name="PART_ColumnRight" Width="*"/>
            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>
              <RowDefinition x:Name="PART_RowTop" Height="*"/>
              <RowDefinition x:Name="PART_RowMiddle" Height="0"/>
              <RowDefinition x:Name="PART_RowBottom" Height="0"/>
            </Grid.RowDefinitions>

            <contract7Present:ScrollViewer
                                x:Name="PART_Pane1ScrollViewer"
                                Grid.Column="0"
                                VerticalScrollBarVisibility="Auto">
              <Border>
                <ContentPresenter Content="{TemplateBinding Pane1}" />
              </Border>

            </contract7Present:ScrollViewer>

            <contract7Present:ScrollViewer
                                x:Name="PART_Pane2ScrollViewer"
                                Grid.Column="2"
                                VerticalScrollBarVisibility="Auto">
              <Border>
                <ContentPresenter Content="{TemplateBinding Pane2}" />
              </Border>
            </contract7Present:ScrollViewer>

            <contract7NotPresent:Border
                            x:Name="PART_Pane1"
                            Grid.Column="0">
              <ContentPresenter Content="{TemplateBinding Pane1}" />
            </contract7NotPresent:Border>

            <contract7NotPresent:Border
                            x:Name="PART_Pane2"
                            Grid.Column="2">

              <ContentPresenter Content="{TemplateBinding Pane2}" />
            </contract7NotPresent:Border>

          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <Style TargetType="TwoPaneView" BasedOn="{StaticResource MyTwoPaneViewStyle}" />

unoplatform / uno