WPF应用程序的响应式UI

Question

I have been trying to adjust the screen based on different sizes to see if any components are reacting to that. Unfortunately they don't I am not sure what I am missing. And it would be great if anyone can give a direct advice and tips for my example implementation.

Here is the code:

    <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. Set x:Name for your main grid to x:Name="Root"

2. Set for Expander attribute Width="{Binding ActualWidth, ElementName=Root}"