Skip to content

Fix SplitView sample layout issue when pane is on the right side #2056

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Oct 3, 2025
Merged

Fix SplitView sample layout issue when pane is on the right side #2056

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c8cc858
Fix SplitView sample layout issue when pane is on the right side
AndrewKeepCoding Sep 22, 2025
5405925
Set the MaxWidth to the SplitView sample
AndrewKeepCoding Sep 26, 2025
c3f3f31
Remove unnecessary code
AndrewKeepCoding Sep 29, 2025
bb12aa4
Merge branch 'main' into splitview-issue-fix
AndrewKeepCoding Sep 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 49 additions & 8 deletions WinUIGallery/Samples/ControlPages/SplitViewPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,45 @@
xmlns:controlPages="using:WinUIGallery.ControlPages"
xmlns:controls="using:WinUIGallery.Controls">
<Page.Resources>
<DataTemplate x:Key="NavLinkItemTemplate" x:DataType="controlPages:NavLink">
<StackPanel
<DataTemplate
x:Key="LeftIconNavLinkItemTemplate"
x:DataType="controlPages:NavLink">
<Grid
Margin="2,0,0,0"
AutomationProperties.Name="{x:Bind Label}"
Orientation="Horizontal">
<SymbolIcon Symbol="{x:Bind Symbol}" />
AutomationProperties.Name="{x:Bind Label}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<SymbolIcon
Grid.Column="0"
Symbol="{x:Bind Symbol}" />
<TextBlock
Grid.Column="1"
Margin="24,0,0,0"
VerticalAlignment="Center"
Text="{x:Bind Label}" />
</StackPanel>
</Grid>
</DataTemplate>
<DataTemplate
x:Key="RightIconNavLinkItemTemplate"
x:DataType="controlPages:NavLink">
<Grid
Margin="0,0,2,0"
AutomationProperties.Name="{x:Bind Label}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="0"
Margin="0,0,24,0"
VerticalAlignment="Center"
Text="{x:Bind Label}" />
<SymbolIcon
Grid.Column="1"
Symbol="{x:Bind Symbol}" />
</Grid>
</DataTemplate>
</Page.Resources>

Expand All @@ -28,7 +56,7 @@
CompactPaneLength="{x:Bind compactPaneLengthSlider.Value, Mode=OneWay}"
DisplayMode="CompactOverlay"
IsPaneOpen="{x:Bind togglePaneButton.IsChecked, Mode=TwoWay, Converter={StaticResource nullableBooleanToBooleanConverter}}"
Width="400"
MaxWidth="400"
IsTabStop="False"
OpenPaneLength="{x:Bind openPaneLengthSlider.Value, Mode=OneWay}"
PaneBackground="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}">
Expand All @@ -51,7 +79,6 @@
VerticalAlignment="Stretch"
IsItemClickEnabled="True"
ItemClick="NavLinksList_ItemClick"
ItemTemplate="{StaticResource NavLinkItemTemplate}"
ItemsSource="{x:Bind NavLinks}"
SelectionMode="Single" />
</Grid>
Expand Down Expand Up @@ -79,6 +106,8 @@
<ToggleButton
x:Name="togglePaneButton"
Content="IsPaneOpen"
Checked="togglePaneButton_CheckedChanged"
Unchecked="togglePaneButton_CheckedChanged"
IsChecked="True" />

<ToggleSwitch
Expand Down Expand Up @@ -198,6 +227,18 @@
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="NavLinkItemLayoutStates">
<VisualState x:Name="LeftIconLayout">
<VisualState.Setters>
<Setter Target="NavLinksList.ItemTemplate" Value="{StaticResource LeftIconNavLinkItemTemplate}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="RightIconLayout">
<VisualState.Setters>
<Setter Target="NavLinksList.ItemTemplate" Value="{StaticResource RightIconNavLinkItemTemplate}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</StackPanel>
</Page>
25 changes: 25 additions & 0 deletions WinUIGallery/Samples/ControlPages/SplitViewPage.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,12 @@ public ObservableCollection<NavLink> NavLinks
public SplitViewPage()
{
this.InitializeComponent();
this.Loaded += SplitViewPage_Loaded;
}

private void SplitViewPage_Loaded(object sender, RoutedEventArgs e)
{
UpdateNavLinkItemLayout();
}

private void NavLinksList_ItemClick(object sender, ItemClickEventArgs e)
Expand All @@ -45,6 +51,25 @@ private void PanePlacement_Toggled(object sender, RoutedEventArgs e)
{
splitView.PanePlacement = SplitViewPanePlacement.Left;
}

UpdateNavLinkItemLayout();
}

private void UpdateNavLinkItemLayout()
{
if (splitView.PanePlacement == SplitViewPanePlacement.Right)
{
VisualStateManager.GoToState(this, "RightIconLayout", false);
}
else
{
VisualStateManager.GoToState(this, "LeftIconLayout", false);
}
}

private void togglePaneButton_CheckedChanged(object sender, RoutedEventArgs e)
{
UpdateNavLinkItemLayout();
}

private void displayModeCombobox_SelectionChanged(object sender, SelectionChangedEventArgs e)
Expand Down