Управление выходит за пределы окна

Question

Я пытаюсь создать «информационную» страницу, но когда я добираюсь до готового продукта, это происходит:

Видео приложения

Так как выможно увидеть постер фильма, и описание можно начать с него, но когда пользователь пытается использовать размер, отличный от размера по умолчанию, он не изменяет размер, поэтому пользователь может видеть ту же информацию.

Код:

<Grid>
    <Image
        Name="Backdrop"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Stretch="UniformToFill" />

    <Grid Background="{ThemeResource SystemControlAcrylicElementBrush}">
        <StackPanel Margin="80">
            <StackPanel Orientation="Horizontal">
                <Button Click="ButtonBase_OnClick" Style="{StaticResource MaterialDesignRaisedLightButton}">
                    <SymbolIcon Symbol="Back" />
                </Button>
                <TextBlock
                    Margin="20,0,0,0"
                    VerticalAlignment="Center"
                    Style="{StaticResource TitleTextBlockStyle}"
                    Text="{x:Bind Movie.Title}" />
            </StackPanel>

            <Border
                Margin="0,10,0,10"
                VerticalAlignment="Bottom"
                BorderBrush="Gray"
                BorderThickness="1"
                Style="{StaticResource DownwardDropShadow}" />

            <StackPanel
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Orientation="Horizontal">
                <StackPanel>
                    <Grid>
                        <Image
                            Name="Poster"
                            MinWidth="200"
                            MaxWidth="500"
                            Margin="10" />
                        <Button
                            Width="100"
                            Height="100"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Background="{ThemeResource SystemControlAcrylicElementBrush}"
                            CornerRadius="100">
                            <Viewbox MaxWidth="60" MaxHeight="60">
                                <SymbolIcon Foreground="Gray" Symbol="Play" />
                            </Viewbox>
                        </Button>
                    </Grid>
                </StackPanel>
                <StackPanel
                    MinWidth="300"
                    MaxWidth="600"
                    Padding="20">
                    <TextBlock Style="{StaticResource PageTitleStyle}" Text="Information" />
                    <Border
                        Margin="0,10,0,10"
                        VerticalAlignment="Bottom"
                        BorderBrush="Gray"
                        BorderThickness="1"
                        Style="{StaticResource DownwardDropShadow}" />
                    <TextBlock
                        Style="{StaticResource BodyTextStyle}"
                        Text="{x:Bind Movie.Overview}"
                        TextWrapping="WrapWholeWords" />
                </StackPanel>
            </StackPanel>
        </StackPanel>
    </Grid>
</Grid>

Короче говоря, как сохранить дизайн, но сделать так, чтобы при изменении размера окна изображение и текст изменялись, чтобы оставаться внутри окна и оставаться видимыми.

Answer 1

Управление выходит за пределы окна

Проблема в том, что при установке корневой панели как StackPanel размер дочернего элемента будет фиксированным. И это не изменится при изменении размера окна. Для решения этой проблемы вы можете попробовать использовать Grid для замены. Пожалуйста, обратитесь к следующей схеме xaml.

<Grid>
    <Image
        Name="Backdrop"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Source="Assets/hello.jpg"
        Stretch="UniformToFill"
        />
    <Grid Background="{ThemeResource SystemControlAcrylicElementBrush}">
        <Grid Margin="80" >
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="9*" />
            </Grid.RowDefinitions>
            <StackPanel Orientation="Horizontal">
                <Button Click="ButtonBase_OnClick">
                    <SymbolIcon Symbol="Back" />
                </Button>
                <TextBlock
                    Margin="20,0,0,0"
                    VerticalAlignment="Center"
                    Style="{StaticResource TitleTextBlockStyle}"
                    Text="Grid Test Page"
                    />
            </StackPanel>

            <Border
                Margin="0,10,0,10"
                VerticalAlignment="Bottom"
                BorderBrush="Gray"
                BorderThickness="1"
                />

            <Grid
                Grid.Row="1"
                Margin="0,20,0,0"
                HorizontalAlignment="Center"
                VerticalAlignment="Top"
                >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <Grid>
                    <Image
                        Name="Poster"
                        MinWidth="200"
                        MaxWidth="500"
                        Margin="10"
                        Source="Assets/hello.jpg"                  
                        />

                    <Button
                        Width="100"
                        Height="100"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Background="{ThemeResource SystemControlAcrylicElementBrush}"
                        CornerRadius="100"
                        >
                        <Viewbox MaxWidth="60" MaxHeight="60">
                            <SymbolIcon Foreground="Gray" Symbol="Play" />
                        </Viewbox>
                    </Button>
                </Grid>
                <StackPanel
                    Grid.Column="1"
                    MinWidth="300"
                    MaxWidth="600"
                    Padding="20"
                    >
                    <TextBlock Text="Information" />
                    <Border
                        Margin="0,10,0,10"
                        VerticalAlignment="Bottom"
                        BorderBrush="Gray"
                        BorderThickness="1"
                        />
                    <TextBlock Text="Defines a flexible grid area that consists of columns and rows. Child elements of the Grid are measured and arranged according to their row/column assignments (set by using Grid.Row and Grid.Column attached properties) and other logic." TextWrapping="WrapWholeWords" />
                </StackPanel>
            </Grid>
        </Grid>
    </Grid>
</Grid>