Windowscommunitytoolkit: MasterDetailsView Back Button

[ghost]

I can see that in your sample when we have the narrow state(width<=320px) the back button will show MasterListView? But it looks like it doesn't work out of box. What I have now : I selected one of the item in master listivew then I able see only details, but when I click on back button I will be navigated on previous page. How I can handle that? I use Prism for handling back navigation

[skendrot]

Hey @BekOV, can you try with the latest bits? https://dotnet.myget.org/feed/uwpcommunitytoolkit/package/nuget/Microsoft.Toolkit.Uwp.UI.Controls

[ghost]

I installed Microsoft.Toolkit.Uwp.UI.Controls Version 1.3.0-dev00419 and all uwp community toolkit packages with this version also Robmikh.CompositionSurfaceFactory that is dependency for UI.Controls. But it is not working. Sometimes I click on back button and nothing happens, then again click on back button and it navigates back on previous page. And it seems that this prerelease package is buggy, because NoSelectionTemplate is not working.

[skendrot]

Could you supply a sample project to reproduce? I cannot reproduce the issues you are describing with the sample app with the current code

[ghost]

@skendrot I created sample project. https://1drv.ms/u/s!AuA5o3xqJaHhh4QS4TZTrqO7_7vTJA

[LudoFran]

In your sample project, if I upgrade your toolkit version to the v1.3.0-dev00489, I can't reproduce the issue. You are currently using the v1.2.0

[skendrot]

@BekOV I can confirm as well that I tested your project with the latest bits and everything works fine. Can you please confirm

[msbek]

@LudoFran @skendrot Finally I found where is issue. That is custom style for Master Details Control -

 <Style TargetType="controls:MasterDetailsView">
            <Setter Property="Background" Value="{ThemeResource ApplicationPageBackgroundThemeBrush}" />
            <Setter Property="BorderBrush" Value="{ThemeResource ApplicationForegroundThemeBrush}" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="controls:MasterDetailsView">
                        <Border Background="{TemplateBinding Background}"
                  BorderBrush="{TemplateBinding BorderBrush}"
                  BorderThickness="{TemplateBinding BorderThickness}">
                            <Grid x:Name="RootPanel">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition x:Name="MasterColumn"
                                  Width="Auto" />
                                    <ColumnDefinition x:Name="DetailsColumn"
                                  Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid x:Name="MasterPanel"
                    Width="{TemplateBinding MasterPaneWidth}"
                    Background="{TemplateBinding MasterPaneBackground}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="0,0,1,0">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="*" />
                                    </Grid.RowDefinitions>
                                    <ContentPresenter x:Name="HeaderContentPresenter"
                                  x:DeferLoadStrategy="Lazy"
                                  Content="{TemplateBinding MasterHeader}"
                                  ContentTemplate="{TemplateBinding MasterHeaderTemplate}"
                                  Visibility="Collapsed" />
                                    <ListView x:Name="MasterList" Margin="0"
                          Grid.Row="1"
                          ItemTemplate="{TemplateBinding ItemTemplate}"
                          ItemsSource="{TemplateBinding ItemsSource}"
                          SelectedItem="{Binding SelectedItem, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" >
                                        <ListView.ItemContainerStyle>
                                            <Style TargetType="ListViewItem">
                                                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                                                <Setter Property="Padding" Value="0"/>
                                                <Setter Property="BorderThickness" Value="0"/>
                                                <Setter Property="Margin" Value="0"/>
                                            </Style>
                                        </ListView.ItemContainerStyle>
                                    </ListView>
                                </Grid>
                                <Grid x:Name="DetailsPanel"
                    Grid.Column="1">
                                    <ContentPresenter x:Name="NoSelectionPresenter"
                                  Content="{TemplateBinding NoSelectionContent}"
                                  ContentTemplate="{TemplateBinding NoSelectionContentTemplate}" />
                                    <ContentPresenter x:Name="DetailsPresenter"
                                                      Background="{TemplateBinding Background}"
                                  ContentTemplate="{TemplateBinding DetailsTemplate}" />
                                </Grid>
                            </Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="NoSelectionWide" />
                                    <VisualState x:Name="HasSelection">
                                        <VisualState.Setters>
                                            <Setter Target="NoSelectionPresenter.Visibility" Value="Collapsed" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="NoSelectionNarrow">
                                        <VisualState.Setters>
                                            <Setter Target="NoSelectionPresenter.Visibility" Value="Collapsed" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="WidthStates">
                                    <VisualState x:Name="NarrowState">
                                        <VisualState.StateTriggers>
                                            <AdaptiveTrigger MinWindowWidth="320" />
                                        </VisualState.StateTriggers>
                                        <VisualState.Setters>
                                            <Setter Target="MasterColumn.Width" Value="*" />
                                            <Setter Target="DetailsColumn.Width" Value="0" />
                                            <Setter Target="DetailsPanel.(Grid.Column)" Value="0" />
                                            <Setter Target="NoSelectionPresenter.Visibility" Value="Collapsed" />
                                            <Setter Target="MasterPanel.BorderThickness" Value="0" />
                                            <Setter Target="MasterPanel.Width" Value="NaN" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="WideState">
                                        <VisualState.StateTriggers>
                                            <AdaptiveTrigger MinWindowWidth="720" />
                                        </VisualState.StateTriggers>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

I overrode the default because I want change ListView Items horizontal orientation to Stretch.
<ListView.ItemContainerStyle> <Style TargetType="ListViewItem"> <Setter Property="HorizontalContentAlignment" Value="Stretch" /> <Setter Property="Padding" Value="0"/> <Setter Property="BorderThickness" Value="0"/> <Setter Property="Margin" Value="0"/> </Style> </ListView.ItemContainerStyle>
When I removed style, everything works ok. Except that AdaptiveGridView ItemClickCommand does not work with preview.

[skendrot]

If you only wanted to extend the ListViewItem you can do that through an implicit style.
Example:

<App>
    <App.Resources>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="Padding" Value="0"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Margin" Value="0"/>
        </Style>
    </App.Resources>
</App>

This would apply to all ListViewItems in your application

[msbek]

@skendrot Okay, I am gonna use this. But how to be with AdaptiveGridView ItemClickCommand ? It is not working.

[skendrot]

Make sure you have set IsItemClickEnabled to true

[msbek]

@skendrot Ohh, I did not know about that. Thank you so much for your fast feedback! Great work!