对 WPF 应用程序响应 UI

Responsive UI for WPF applications

我一直在尝试根据不同的尺寸调整屏幕,看看是否有任何组件对此有反应。不幸的是他们没有 我不确定我错过了什么。如果有人能为我的示例实现提供直接的建议和提示,那就太好了。

代码如下:

    <Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="1000" Width="800">
    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <ListView Grid.Column="0" Grid.RowSpan="3" Grid.ColumnSpan="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <ListViewItem Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="4" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                        <RowDefinition />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Expander HorizontalAlignment="Stretch" Grid.Column="0" Grid.Row="1" VerticalAlignment="Stretch">
                        <Grid Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="20" />
                                <ColumnDefinition Width="2*"/>
                                <ColumnDefinition Width="100" />
                                <ColumnDefinition Width="20*"/>
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>

                            <Grid.RowDefinitions>
                                <RowDefinition />
                                <RowDefinition />
                                <RowDefinition />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Label Grid.Column="1" Grid.Row="0" Content="HJello World meeee"/>
                            <ListView Grid.Column="3" Grid.Row="0"  Grid.RowSpan="4">
                                <ListView.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <StackPanel Orientation="Horizontal"></StackPanel>
                                    </ItemsPanelTemplate>
                                </ListView.ItemsPanel>
                                <Button Content="Hello Tourist fu"/>
                                <Button Content="Hello Tourist fu"/>
                                <Button Content="Hello Tourist fu"/>
                                <Button Content="Hello Tourist fu"/>
                                <Button Content="Hello Tourist fu"/>
                                <ListViewItem Content="Test"/>
                            </ListView>
                            <Button Grid.Column="4" Grid.Row="0" Content="Test"/>
                        </Grid>
                    </Expander>
                </Grid>
            </ListViewItem>
            <ListViewItem Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="4">

                <Expander >
                    <Grid Width="Auto">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="20" />
                            <ColumnDefinition Width="2*"/>
                            <ColumnDefinition Width="100" />
                            <ColumnDefinition Width="20*"/>
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>

                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Label Grid.Column="1" Grid.Row="0" Content="HJello World meeee"/>
                        <ListView Grid.Column="3" Grid.Row="0"  Grid.RowSpan="4">
                            <ListView.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel Orientation="Horizontal"></StackPanel>
                                </ItemsPanelTemplate>
                            </ListView.ItemsPanel>
                            <Button Content="Hello Tourist fu"/>
                            <Button Content="Hello Tourist fu"/>
                            <Button Content="Hello Tourist fu"/>
                            <Button Content="Hello Tourist fu"/>
                            <Button Content="Hello Tourist fu"/>
                            <ListViewItem Content="Test"/>
                        </ListView>
                        <Button Grid.Column="4" Grid.Row="0" Content="Test"/>
                    </Grid>
                </Expander>
            </ListViewItem>
        </ListView>

    </Grid>
</Window>
  1. 将主网格的 x:Name 设置为 x:Name="Root"

  2. 设置为 Expander 属性 Width="{Binding ActualWidth, ElementName=Root}"