Help with building Side page/pane

[itayasaf2001xd]

I currently have a basic home page set up with just a title in these 2 files:

Home.xaml
Home.xaml.css

I’ve experimented with different grid layouts, but I haven’t been able to achieve the layout shown in the image (I need the right page/pane).

What I’m trying to build is a layout with its own bordered container and a persistent side pane (or details pane) that appears across most pages in the app (except for the Settings page).

Could someone tell me the official name of this type of layout/component, or point me in the right direction (for example, a sample implementation or code snippet)?

[lgztx96]

You should check out WinUI-Gallery, which provides usage examples for most controls.

The example in your screenshot can be implemented using ItemsView + UniformGridLayout. For the detailed view, you only need to customize the style and bind SelectedItem.

[itayasaf2001xd]

I tried what you suggested, but as you can see, the page still has the outer border/container. I’m not sure how to remove it only for this specific page, or if it’s even possible.

Right now it looks like two boxes inside a larger box, and I want to remove that outer “big box” effect similar to how the Fluent Emoji Gallery app handles its layout.

[lgztx96]

You just need to tweak the margins/background colors and override some NavigationView resources.

    <Grid>
        <Grid.Resources>
            <SolidColorBrush x:Key="NavigationViewContentBackground" Color="Transparent" />
            <Thickness x:Key="NavigationViewContentGridBorderThickness">0,0,0,0</Thickness> 
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TitleBar
            x:Name="titleBar"
            Title="Test"
            Height="48" />
        <NavigationView
            Grid.Row="1"
            IsPaneToggleButtonVisible="False"
            IsSettingsVisible="False"
            Style="{ThemeResource MainNavigationViewStyle}">
            <NavigationView.MenuItems>
                <NavigationViewItem
                    Content="Home"
                    Icon="Home"
                    Tag="Home" />
                <NavigationViewItem
                    Content="Samples"
                    Icon="{ui:FontIcon Glyph=&#xE754;}"
                    Tag="Samples" />
            </NavigationView.MenuItems>
            <Page>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition Width="340" />
                    </Grid.ColumnDefinitions>
                    <Border
                        Grid.Column="0"
                        Background="#23292c40"
                        BorderBrush="{ThemeResource ControlStrokeColorDefault}"
                        BorderThickness="1"
                        CornerRadius="8 8 0 0" />
                    <Border
                        Grid.Column="1"
                        Margin="8,0,8,8"
                        Background="#23292c40"
                        BorderBrush="{ThemeResource ControlStrokeColorDefault}"
                        BorderThickness="1"
                        CornerRadius="8" />
                </Grid>
            </Page>
        </NavigationView>
    </Grid>

[itayasaf2001xd]

You just need to tweak the margins/background colors and override some NavigationView resources.

``` 0,0,0,0 ```

Thanks man, it worked perfectly