CODEWITHSUNDEEP
uwpwindows-10uwp-xaml
nam
nam

Reputation: 23749

UWP app MainWindow not displaying the second button on the left

I've tried various variations but when I run the app the second button of the MainWindow does not show. It seems I'm not quite understanding the design patterns of the app. Question: what changes should I make to the XAML here to have second button (titled Test2) displayed when app runs?

Remark: It's a Windows 10 laptop. I'm using VS2019.

XAML

<Page
    x:Class="UWPTest.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UWPTest"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Button x:Name="btnTest" Content="Test" Margin="69,1,0,0" Click="BtnTest_Click" VerticalAlignment="Top"/>
        <Button x:Name="btnGetSelContSrcView" Content="Test2" Margin="69,47,0,921" VerticalAlignment="Stretch" Click="BtnGetSelContSrcView_Click"/>
        <WebView x:Name="wvTest" Margin="130,38,0,10" DOMContentLoaded="WvTest_DOMContentLoaded"/>
    </Grid>
</Page>

Snaphot of Design View

enter image description here

Snaphot Main Window after app runs [FULL Screen mode om 17" monitor]

Note that the second button is not displayed.

enter image description here

Snaphot Main Window after first button is clicked [FULL Screen mode om 17" monitor]

Note that the first button click event displays the html on right side (as expected) but the second button is not displayed here either.

enter image description here

Upvotes: 0

Views: 80

Answers (2)

TipEra
TipEra

Reputation: 159

Use StackPanel for correct alignment and Grid ColumnDefinitions or Grid RowDefinitions

Example:

<Grid Loaded="Page_Loaded">
    <Grid.RowDefinitions>
        <RowDefinition Height="32"/>
        <RowDefinition />
    </Grid.RowDefinitions>

    <Grid Grid.Row="0">
        <StackPanel Orientation="Horizontal">
            <Button Content="Pre page" />
            <Button Content="Next page" />
        </StackPanel>
    </Grid>
    <Grid Grid.Row="1">
        <WebView Source="https://google.com" />
    </Grid>
</Grid>

Screenshot

Links:

https://learn.microsoft.com/en-us/windows/uwp/design/layout/layout-panels

Upvotes: 1

Faywang - MSFT
Faywang - MSFT

Reputation: 5868

Cause: The margin "Margin="69,47,0,921"" you used in the second button means 47 distance from the top of the screen and 921 distance from the bottom of the screen.When you run the app,once the screen height less than 968,then the second button won't display,because it's height is equal to 0.So when you maximize the screen,the second button will display.

Solution: You can try the following code to set the second button.

<Button x:Name="btnTest" Content="Test" Margin="69,1,0,0" VerticalAlignment="Top"/>
<Button x:Name="btnGetSelContSrcView" Content="Test2" Margin="69,47,0,0" VerticalAlignment="Top" />

Upvotes: 0

Related Questions