CODEWITHSUNDEEP
c#wpfxaml
Percy
Percy

Reputation: 3115

How to make xaml Page the full width of screen

I have the following MainPage.xaml

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <RelativePanel>
        <Button Name="btnHamburger" FontFamily="Segoe MDL2 Assets" Content="" Click="HamburgerButton_Click"  RelativePanel.AlignLeftWithPanel="True"/>
        <TextBlock Name="PageTitle" Text="Title" FontSize="24" FontWeight="Bold" RelativePanel.AlignHorizontalCenterWithPanel="True"/>
    </RelativePanel>
    <SplitView Name="MySplitView" Grid.Row="1" DisplayMode="Overlay" OpenPaneLength="170" CompactPaneLength="56" HorizontalAlignment="Left">
        <SplitView.Pane>
            <StackPanel Orientation="Vertical">
                <TextBlock Text="Skyron Image" FontSize="16" VerticalAlignment="Center" />
                <ListBox SelectionMode="Single" Name="IconsListBox" SelectionChanged="IconsListBox_SelectionChanged">

                </ListBox>
            </StackPanel>
        </SplitView.Pane>
        <SplitView.Content>
            <Frame Name="MyFrame" />
        </SplitView.Content>
    </SplitView>
</Grid>

It gives me a navigation menu system. When I click on of the navigation links, I load the corresponding page into the Frame MyFrame.

This is my HomePage

<Grid HorizontalAlignment="Stretch">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto"/>
    </Grid.ColumnDefinitions>
    <TextBlock Text="Home page" Name="tbHome" />
</Grid>

As you can see, I've tried to achieve my desired outcome by setting HorizontalAlignment="Stretch" on the grid and setting a column definition to auto.

I guess the issue is that I don't have enough content in the grid to make it full screen. This is what I currently have:

Screenshot

I have made the homepage background blue - as you can see, it doesn't fill the entire screen.

How can I achieve what I want, without setting a width on the Grid - as this won't work with different sized phones/screens.

EDIT: I've just relised the width of the content is being controlled by the OpenPaneLength="170" setting. Why does this effect the content and how can I stop it effecting the content width?

Upvotes: 2

Views: 4354

Answers (1)

N Jacobs
N Jacobs

Reputation: 341

Set the HorizontalAlignment property of the SplitView to "Stretch" instead of "Left".

Upvotes: 3

Related Questions