Question

我有一个窗口，其中有一个框架，我在其中添加第二页。到目前为止，我有Page1和Page2。通过使用NavigationService，我可以在同一个窗口中的两个页面之间移动，这是我花了一些时间尝试实现的。

现在的问题是，当窗口最大化（我想要）时，页面内容仅显示在窗口的左上角。

据我所知，这纯粹是选择正确的容器的问题，但是我有点陷入困境，这是每个部分的布局;

Window - Contains a form
Pages (added to the form) - Contain a dock panel - Contains a canvas - Contains elements (buttons etc)

正如我所说的那样，问题是该页面只显示在左上角，我希望该页面能够＆＃34;成长＆＃34;与窗口。

窗口代码：

<Window x:Name="window" x:Class="WPFNavigation.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFNavigation"
        mc:Ignorable="d"
        Title="Test1" Height="500" Width="500" ResizeMode="CanResizeWithGrip" WindowState="Maximized">
    <Frame x:Name="frame" HorizontalAlignment="Stretch"  VerticalAlignment="Stretch"  NavigationUIVisibility="Hidden"/>
</Window>

页面代码：

<Page x:Class="WPFNavigation.Page1"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:WPFNavigation"
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"
      Title="Page1" WindowTitle="Page 1">
    <DockPanel HorizontalAlignment="Left" Height="280" LastChildFill="False" Margin="10,10,0,0" VerticalAlignment="Top" Width="280">
        <Canvas HorizontalAlignment="Stretch" Width="280">
            <Button x:Name="button_Page1" Content="Page 1" Canvas.Left="19" Canvas.Top="235" Width="75"/>
            <Button x:Name="button_Page2" Content="Page 2" Canvas.Left="99" Canvas.Top="235" Width="75" Click="button_Copy_Click"/>
            <Button x:Name="button_Page3" Content="Page 3" Canvas.Left="179" Canvas.Top="235" Width="75"/>
        </Canvas>
    </DockPanel>
</Page>

Answer 1

这里的主要问题是您使用绝对定位将元素放在Canvas上，并且明确设置{{1}元素。这对于动态窗口大小并不适用。

通过设置Width和Canvas.Left，您假设运行此应用程序的每个设备都可以以完全相同的方式呈现视图。想象一下，您的应用程序在手机或分辨率的屏幕上会是什么样子。

相反，请考虑使用Canvas.Top，或者更好地利用您的Grid，这是一个例子：

DockPanel

这显然是一个非常简单的示例，但它展示了元素的相对大小和位置，而不是明确设置<Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Button Content="Hello"/> <Button Content="World" Grid.Column="1"/> <TextBox Text="Le toucan has arrived" Grid.Column="2"/> </Grid>，Canvas.Left和设置Canvas.Top。

上面的示例适用于动态窗口大小调整，如果要调整窗口大小，Width将调整大小，因为它所在的列设置为TextBox宽度，这基本上意味着＆＃34;填写所有可用空间＆＃34; 。

如果您希望页面内容扩展以便填充所有可用空间，那么您可以使用*，可以找到教程here。这些是正确的，但是我建议你在实现ViewBox之前先掌握其他布局面板，因此它们应该小心使用，因为它很容易搞砸用户体验内容可能会变得太小或太大。

明确设置元素的ViewBox和/或Width应该是绝对的最后手段。允许应用程序在调整应用程序大小时很好地转换，这使得任何用户体验更多令人愉快的，实现这一目标的方法是使用相对大小和位置。

我建议您阅读这个主题here和here。

将页面和内容安装到窗口和窗体c＃

1 个答案: