如何让 UserControl 伸展以填充分配的空间? [英] How to get a UserControl to stretch to fill the alloted space?

问题描述

在 630 x 400 窗口中，我正在加载 XAML 元素:

In a 630 x 400 Window, I'm loading there XAML elements:

• 顶部菜单
• 动态用户控制
• 底部的页脚

问题是，当我设置 UserControl 的背景时，颜色只会下降到内容.我当然希望 UserControl 的背景覆盖整个 UserControl.我试过了:

The problem is that when I set the background of the UserControl, the color only goes down as far as the content. I want the background of the UserControl to cover the whole UserControl of course. I've tried:

• VerticalContentAlignment="Stretch" 在 UserControl
• VerticalAlignment="Stretch" 在 UserControl
• VerticalContentAlignment="Stretch" 在 MainView
• VerticalAlignment="Stretch" 在 MainView

• VerticalContentAlignment="Stretch" in the UserControl
• VerticalAlignment="Stretch" in the UserControl
• VerticalContentAlignment="Stretch" in the MainView
• VerticalAlignment="Stretch" in the MainView

但是颜色还是不肯下来.我不想设置固定宽度，因为用户可以增加应用程序的大小.

But the color still refuses to go down. I don't want to set a fixed width since the user is able to increase the size of the application.

如何让我的 UserControl 的背景颜色填充 UserControl 的整个区域，而不是仅填充其内容区域?

How can I get the background color of my UserControl to fill the full area of the UserControl instead of only the area of its content?

PageItemOptionsView.xaml:

<UserControl x:Class="TestMenu234.Views.PageItemOptionsView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             VerticalContentAlignment="Stretch"
             VerticalAlignment="Stretch"
             Background="#ddd">
    <StackPanel Margin="10">
        <TextBlock Text="This is the options area."/>
        <Button Content="Click to go to the Manage Customers page."
                    Width="200"/>
    </StackPanel>
</UserControl>

MainView.xaml:

<Window x:Class="TestMenu234.Views.MainView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:c="clr-namespace:TestMenu234.Commands"
    xmlns:vm="clr-namespace:TestMenu234.ViewModels"
    xmlns:v="clr-namespace:TestMenu234.Views"
    Title="Main Window" Height="400" Width="630" MinWidth="630">

...

    <DockPanel LastChildFill="False">

        <Menu DockPanel.Dock="Top">
            <MenuItem 
                Header="Pages" ItemsSource="{Binding AllPageItemViewModels}"
                      ItemTemplate="{StaticResource CodeGenerationMenuTemplate}"/>
        </Menu>

        <ContentControl
            DockPanel.Dock="Top"
            VerticalAlignment="Stretch"
            VerticalContentAlignment="Stretch"
            Content="{Binding CurrentPageItemViewModel}"/>

        <Border DockPanel.Dock="Bottom" Padding="5 5 5 0" Background="#eee">
            <Grid Background="#eee">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" MinWidth="300"/>
                    <ColumnDefinition Width="200"/>
                    <ColumnDefinition Width="100"/>
                </Grid.ColumnDefinitions>
                <Slider 
                Grid.Column="0"
                HorizontalAlignment="Left"
                Value="{Binding CurrentPageItemViewModelIndex}"
                Width="300"
                Minimum="0"
                Maximum="{Binding HighestPageItemIndex}"/>

                <TextBlock Grid.Column="1" 
                           HorizontalAlignment="Center" FontWeight="Bold" 
                           Text="{Binding CurrentPageItemViewModelTitle}"/>

                <DockPanel Grid.Column="2" Margin="0 0 0 5" LastChildFill="False">
                    <Button
                    Margin="3 0 0 0"
                    DockPanel.Dock="Right"
                HorizontalAlignment="Right"
                Content="Next" Command="{Binding NextPageCommand}"/>
                    <Button
                    DockPanel.Dock="Right"
                Content="Prev" Command="{Binding PreviousPageCommand}"/>
                </DockPanel>
            </Grid>
        </Border>

    </DockPanel>
</Window>

推荐答案

你试过了吗...

1. 设置保证金="0"
2. 使用 LastChildFill="True" 使您的控件成为 DockPanel 的最后一个子项

这篇关于如何让 UserControl 伸展以填充分配的空间?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！