控件超出窗口

Question

我试图制作一个“信息”页面，但是当我进入成品时，会发生这种情况：

Video of application

因此，您可以看到电影的海报，并且开头的描述很好，但是当用户尝试使用与默认大小不同的大小时，它不会调整大小，因此用户可以看到相同的信息。 / p>

代码：

<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时，child元素的大小将固定。并且它不会随着窗口大小的改变而改变。为了解决这个问题，您可以尝试使用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>