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

How to stretch in width a WPF user control to its window?

提问by Victor Rodrigues

I have a Window with my user control and I would like to make usercontrol width equals window width. How to do that?

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

The user control is a horizontal menu and contains a grid with three columns:

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

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

That is the reason I want the window width, to stretch the user control to 100% width, with the second column relative.

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

EDIT:

编辑：

I am using a grid, there is the code for 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>

采纳答案by Arjan Einbu

You need to make sure your usercontrol hasn't set it's width in the usercontrol's xaml file. Just delete the Width="..." from it and you're good to go!

你需要确保你的用户控件没有在用户控件的 xaml 文件中设置它的宽度。只需从中删除 Width="..." 就可以了！

EDIT:This is the code I tested it with:

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

SOUserAnswerTest.xaml:

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:

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>

回答by Andy

What container are you adding the UserControl to? Generally when you add controls to a Grid, they will stretch to fill the available space (unless their row/column is constrained to a certain width).

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

回答by Jason Miesionczek

Does setting the HorizontalAlignment to Stretch, and the Width to Auto on the user control achieve the desired results?

在用户控件上将 Horizo​​ntalAlignment 设置为 Stretch，将 Width 设置为 Auto 是否能达到预期的效果？

回答by Bubblewrap

Is the Canvas crucial in your window? If not, try removing it and keep the Grid as the main panel. Canvas has no size unless specified, while a Grid normally takes up all available space. Inside the Canvas, the Grid will have no available space.

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

回答by Michael

The Canvas in WPF doesn't provide much automatic layout support. I try to steer clear of them for this reason (HorizontalAlignment and VerticalAlignment don't work as expected), but I got your code to work with these minor modifications (binding the Width and Height of the control to the canvas's ActualWidth/ActualHeight).

WPF 中的 Canvas 没有提供太多的自动布局支持。由于这个原因，我试图避开它们（Horizo​​ntalAlignment 和 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>

The Canvas is the problem here. If you're not actually utilizing the features the canvas offers in terms of layout or Z-Order "squashing" (think of the flatten command in PhotoShop), I would consider using a control like a Grid instead so you don't end up having to learn the quirks of a control that works differently than you have come to expect with WPF.

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

回答by Leonardo Nowaczyk

Instead use Width and Height in user controls, use MinHeight and MinWidth. Then you can configure the UC well, and will be able to stretch inside other window.

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

Well, as Im seeing in WPF Microsoft made a re-thinking about windows properties and behaviors, but so far, I didn't miss anything from olds windows forms, in WPF the controls are there, but in a new point of view.

好吧，正如我在 WPF 中看到的，Microsoft 重新思考了 Windows 的属性和行为，但到目前为止，我没有遗漏旧式 Windows 窗体中的任何内容，在 WPF 中控件就在那里，但是以新的观点。

回答by Shahid

This worked for me. don't assign any width or height to the UserControl and define row and column definition in the parent window.

这对我有用。不要为 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>