Thiết kế website giá rẻ

Question

I’m experiencing a problem with WPF Grid layout that is really frustrating me.

The main app window is supposed to be divided into three principle panes. I’ve set up a 2×2 Grid. The rxui:ViewModelViewHost in Grid Column 0, Row 0 (R0C0) will display a bunch of content packaged into a ReactiveUserControl; I’ve replaced all that with a fixed-size placeholder for now, but the expectation is that the column should be sized to fit the necessary width of that ReactiveUserControl. I want the InstructionsTabControl in R1C0 to be stretched to match that width, and then lay out its internal FlowDocument to whatever size the column ends up being.

Here is the main window layout:

<rxui:ReactiveWindow 
        x:Class="DemonstrationTool.Demonstration"
        x:TypeArguments="local:DemonstrationViewModel"
        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:rxui="http://reactiveui.net"
        xmlns:local="clr-namespace:DemonstrationTool"
        mc:Ignorable="d"
        Title="Demonstration"
        DataContext="{Binding Path=ViewModel, RelativeSource={RelativeSource Self}}"
        Width="1920"
        Height="1080"
        d:DesignHeight="500">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <rxui:ViewModelViewHost Grid.Column="0" Grid.Row="0" 
                                x:Name="Controls"
                                ViewModel="{Binding Path=ControlsViewModel}" />

        <TabControl Name="InstructionsTabControl"
                    Grid.Column="0" Grid.Row="1"
                    TabStripPlacement="Bottom"
                    SelectedIndex="0">
            <TabControl.Resources>
                <Style TargetType="Paragraph">
                    <Setter Property="Margin" Value="0 6"/>
                </Style>
            </TabControl.Resources>
            <TabControl.ItemContainerStyle>
                <Style TargetType="TabItem">
                    <Setter Property="Padding" Value="0"></Setter>
                    <Style.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter Property="FontStyle" Value="Italic"/>
                            <Setter Property="FontWeight" Value="Bold"/>
                            <Setter Property="BorderBrush" Value="Black"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </TabControl.ItemContainerStyle>
            <TabControl.ItemTemplate>
                <DataTemplate DataType="{x:Type local:StepViewModel}">
                    <StackPanel Orientation="Horizontal" 
                                Background="{Binding Path=ColorBrush}">
                        <TextBlock Margin="6" 
                                   Text="{Binding Path=Name}"
                                   Foreground="{Binding Path=TextColorBrush}"/>
                    </StackPanel>
                </DataTemplate>
            </TabControl.ItemTemplate>
            <TabControl.ContentTemplate>
                <DataTemplate>
                    <rxui:ViewModelViewHost ViewModel="{Binding}" 
                                            HorizontalContentAlignment="Stretch"
                                            VerticalContentAlignment="Stretch"
                                            Duration="0"/>
                </DataTemplate>
            </TabControl.ContentTemplate>
        </TabControl>

        <Grid Grid.Column="1" Grid.Row="0" Grid.RowSpan="2"
              Background="LightSkyBlue">
            <Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderBrush="Black">
                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">Placeholder for content in second column</TextBlock>
            </Border>
        </Grid>
    </Grid>
</rxui:ReactiveWindow>

The problem is that when I vertically resize the Window to any height greater than the window’s initial Height, the TabControl sprawls out wider than the content in R0C0, widening Column 0. I don’t understand why this is.

Here is the content of the view being rendered by the R1C0 TabControl‘s ContentTemplate‘s ViewModelViewHost, which is being unexpectedly widened:

<rxui:ReactiveUserControl 
    x:Class="DemonstrationTool.StepView"
    x:TypeArguments="local:StepViewModel"
    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:rxui="http://reactiveui.net"
    xmlns:local="clr-namespace:DemonstrationTool"
    mc:Ignorable="d">
    <DockPanel Height="{Binding RelativeSource={RelativeSource AncestorType=UserControl}, Path=ActualHeight}"
               Width="{Binding RelativeSource={RelativeSource AncestorType=UserControl}, Path=ActualWidth}">
        <FlowDocumentScrollViewer HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <FlowDocumentScrollViewer.Document>
                <FlowDocument>
                    <Paragraph>
                        <Run Name="HeaderText" />
                    </Paragraph>
                    <List>
                        <ListItem>
                            <Paragraph>Molestias itaque dolore ad nesciunt quod non architecto autem. Nam qui cum voluptatem officiis amet est rem sed. Praesentium a asperiores asperiores est et. Aut doloribus officiis laborum temporibus et quia unde laudantium. Sapiente enim enim velit placeat provident earum fuga.</Paragraph>
                        </ListItem>
                        <ListItem>
                            <Paragraph>Officia qui dolores et. Qui rerum sed velit quibusdam reiciendis molestias. Ea ut repellat qui. Dolor qui odit et ipsa saepe veritatis nesciunt.</Paragraph>
                        </ListItem>
                        <ListItem>
                            <Paragraph>Accusantium quaerat modi ipsum eum officia quos molestias. Eligendi eum quos aliquam pariatur laudantium natus a. Molestias voluptas ex et.</Paragraph>
                        </ListItem>
                        <ListItem>
                            <Paragraph>Sunt ratione et assumenda sint hic eum exercitationem ducimus. Ut veritatis voluptatibus assumenda cupiditate. Debitis enim natus et modi consequatur at. Eum porro culpa ipsa atque nisi.</Paragraph>
                        </ListItem>
                        <ListItem>
                            <Paragraph>Architecto voluptas sed quisquam architecto debitis rem. Non fugiat laborum voluptates voluptas. Vel quia inventore fuga ex mollitia sit qui. Molestiae ipsam consequatur deleniti corporis quibusdam. Et at nihil laudantium.</Paragraph>
                        </ListItem>
                    </List>
                </FlowDocument>
            </FlowDocumentScrollViewer.Document>
        </FlowDocumentScrollViewer>
    </DockPanel>
</rxui:ReactiveUserControl>

And this is the view being rendered by the ViewModelViewHost in R0C0 of the main Window:

<rxui:ReactiveUserControl 
    x:Class="DemonstrationTool.ControlsView"
    x:TypeArguments="local:ControlsViewModel"
    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:rxui="http://reactiveui.net"
    xmlns:local="clr-namespace:DemonstrationTool"
    mc:Ignorable="d"
    DataContext="{Binding Path=ViewModel, RelativeSource={RelativeSource Self}}">
    <Grid>
        <Border Margin="4" Width="830" Height="250" BorderBrush="Black" BorderThickness="1" Background="Beige">
            <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">Placeholder for Grid (0,0) content</TextBlock>
        </Border>
    </Grid>
</rxui:ReactiveUserControl>

Can you tell me why the layout engine is behaving this way, and how I can fix it?

Thiết kế website giá rẻ

Danh mục

Grid column with Auto width unexpectedly widening when enclosing Window’s Height increases