WPF應用程序的響應式UI

Question

我一直在嘗試根據不同的大小調整屏幕，以查看是否有任何組件對此做出反應。 不幸的是，他們不確定我缺少什么。 如果任何人都可以為我的示例實現提供直接的建議和技巧，那就太好了。

這是代碼：

    <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>

Answer 1

1. 設置x:Name為您的主網架，以x:Name="Root"

2. 設置Expander屬性Width="{Binding ActualWidth, ElementName=Root}"