如何将 WPF 用户控件的宽度拉伸到其窗口？答案

【问题标题】：How to stretch in width a WPF user control to its window?如何将 WPF 用户控件的宽度拉伸到其窗口？
【发布时间】：2010-10-02 12:29:57
【问题描述】：

我有一个带有用户控件的窗口，我想让用户控件的宽度等于窗口宽度。该怎么做？

用户控件是一个水平菜单，包含一个三列网格：

<ColumnDefinition Name="LeftSideMenu" Width="433"/>
<ColumnDefinition Name="Middle" Width="*"/>
<ColumnDefinition Name="RightSideMenu" Width="90"/>

这就是我想要窗口宽度的原因，将用户控件拉伸到 100% 宽度，第二列是相对的。

编辑：

我用的是网格，有Window的代码：

<Window x:Class="TCI.Indexer.UI.Operacao"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:tci="clr-namespace:TCI.Indexer.UI.Controles"
    Title=" " MinHeight="550" MinWidth="675" Loaded="Load" ResizeMode="NoResize" WindowStyle="None" WindowStartupLocation="CenterScreen" WindowState="Maximized" Focusable="True"
    x:Name="windowOperacao">
    <Canvas x:Name="canv">
        <Grid>
            <tci:Status x:Name="ucStatus"/> <!-- the control which I want to stretch in width -->
        </Grid>
    </Canvas>
</Window>

【问题讨论】：

标签： c# .net wpf xaml wpf-controls

【解决方案1】：

您需要确保您的用户控件没有在用户控件的 xaml 文件中设置其宽度。只需从中删除 Width="..." 即可！

编辑：这是我测试它的代码：

SOUserAnswerTest.xaml：

<UserControl x:Class="WpfApplication1.SOAnswerTest"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="300">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Name="LeftSideMenu" Width="100"/>
            <ColumnDefinition Name="Middle" Width="*"/>
            <ColumnDefinition Name="RightSideMenu" Width="90"/>
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Column="0">a</TextBlock>
        <TextBlock Grid.Column="1">b</TextBlock>
        <TextBlock Grid.Column="2">c</TextBlock>
    </Grid>
</UserControl>

Window1.xaml:

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfApplication1"
    Title="Window1" Height="300" Width="415">
    <Grid>

        <local:SOAnswerTest Grid.Column="0" Grid.Row="5" Grid.ColumnSpan="2"/>
    </Grid>
</Window>

【讨论】：

感谢您的关注，阿扬。它在这里也可以正常工作，但是我的窗口没有设置 Width="415"，因为它被设计为全屏。当我设置宽度时，效果很好。

【解决方案2】：

WPF 中的 Canvas 不提供太多自动布局支持。出于这个原因，我试图避开它们（HorizontalAlignment 和 VerticalAlignment 不能按预期工作），但我让您的代码可以处理这些小修改（将控件的宽度和高度绑定到画布的 ActualWidth/ActualHeight）。

<Window x:Class="TCI.Indexer.UI.Operacao"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:tci="clr-namespace:TCI.Indexer.UI.Controles"
Title=" " MinHeight="550" MinWidth="675" Loaded="Load" 
ResizeMode="NoResize" WindowStyle="None" WindowStartupLocation="CenterScreen" 
WindowState="Maximized" Focusable="True" x:Name="windowOperacao">

<Canvas x:Name="canv">
    <Grid>
        <tci:Status x:Name="ucStatus" Width="{Binding ElementName=canv
                                                    , Path=ActualWidth}" 
                                      Height="{Binding ElementName=canv
                                                    , Path=ActualHeight}"/> 
        <!-- the control which I want to stretch in width -->
    </Grid>
</Canvas>

画布是这里的问题。如果您实际上并没有利用画布在布局或 Z 顺序“挤压”方面提供的功能（想想 PhotoShop 中的 flatten 命令），我会考虑使用像 Grid 这样的控件，这样您就不会结束必须了解与 WPF 所期望的不同的控件的怪癖。

【讨论】：

谢谢，绑定到 ActualWidth 帮助我完成了一个项目，我在 StackPanel 中有一个自定义 UserControl。 StackPanel 使用 HorizontalAlignement=Stretch 并占据整个宽度，但用户控件保持在 0 宽度。将用户控件绑定到其父堆栈面板 ActualWidth 为我解决了这个问题。

【解决方案3】：

画布在您的窗口中至关重要吗？如果没有，请尝试将其删除并将 Grid 保留为主面板。除非指定，否则 Canvas 没有大小，而 Grid 通常会占用所有可用空间。在 Canvas 内部，Grid 将没有可用空间。

【讨论】：

【解决方案4】：

在用户控件上将 HorizontalAlignment 设置为 Stretch，将 Width 设置为 Auto 是否可以达到预期的效果？

【讨论】：

【解决方案5】：

您要将 UserControl 添加到哪个容器？通常，当您将控件添加到 Grid 时，它们会拉伸以填充可用空间（除非它们的行/列被限制为特定宽度）。

【讨论】：

【解决方案6】：

在用户控件中使用 Width 和 Height，使用 MinHeight 和 MinWidth。然后你就可以很好的配置UC了，就可以在其他窗口里面拉伸了。

好吧，正如我在 WPF 中看到的那样，Microsoft 重新考虑了 Windows 属性和行为，但到目前为止，我并没有错过旧 Windows 窗体中的任何内容，在 WPF 中，控件在那里，但在一个新的点查看。

【讨论】：

【解决方案7】：

这对我有用。不要为 UserControl 分配任何宽度或高度，并在父窗口中定义行和列。

<UserControl x:Class="MySampleApp.myUC"
         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" 
         mc:Ignorable="d"  
        >
   <Grid>

    </Grid>
</UserControl>


 <Window xmlns:MySampleApp="clr-namespace:MySampleApp"  x:Class="MySampleApp.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="auto" Width="auto" MinWidth="1000" >
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />           
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />            
    </Grid.ColumnDefinitions>
    <MySampleApp:myUC Grid.Column="0" Grid.Row="0" />       
</Grid>

【讨论】：