將UserControl中的網格列寬綁定到父網格列寬

Question

我有一個WPF網格，其中包含兩行。 第一行包含4列，每列包含一個按鈕。 第二行包含帶有colspan 3的用戶控件。 自定義控件包含具有兩列的另一個Grid。

我想將UserControl的網格中第一列的寬度設置爲MainWindow網格中第二列的寬度。 在下面的例子中，「嵌套列0」的寬度應該與「列1」的寬度相同。

我試過ElementName，但沒有成功。 任何想法如何做到這一點？

<Window x:Class="TestElementName.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:trace="clr-namespace:System.Diagnostics;assembly=WindowsBase" 
     xmlns:local="clr-namespace:TestElementName" 
     Title="MainWindow" Height="200" Width="600"> 
    <Grid Tag="YeahGrid" Name="grid"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto"/> 
      <ColumnDefinition Width="Auto" Tag="Hallelujah" x:Name="ColDef2"/> 
      <ColumnDefinition Width="Auto"/> 
      <ColumnDefinition Width="*"/> 
     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto" /> 
      <RowDefinition Height="*" /> 
     </Grid.RowDefinitions> 

     <Button Grid.Column="0" Grid.Row="0">Column 0</Button> 
     <Button Grid.Column="1" Grid.Row="0" MinWidth="180">Column 1</Button> 
     <Button Grid.Column="2" Grid.Row="0" MinWidth="115">Column 2</Button> 
     <Button Grid.Column="3" Grid.Row="0">Column 3</Button> 

     <local:ucButton Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="3" BorderBrush="Red" BorderThickness="1" /> 
    </Grid> 
</Window> 

用戶控制如下：

<UserControl x:Class="TestElementName.ucButton" 
      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:trace="clr-namespace:System.Diagnostics;assembly=WindowsBase" 
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"> 
    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto"/> 
      <ColumnDefinition Width="Auto"/> 
     </Grid.ColumnDefinitions> 

     <Button Grid.Column="0">nested column 0</Button> 
     <Button Grid.Column="1">nested column 1</Button> 
    </Grid> 
</UserControl> 

謝謝！

Answer 1

在你的UserControl Xaml中，你提到了ColumnDefinition width =「Auto」。在那個地方，請根據您的要求添加MinWidth屬性。

對於您的情況，您可以添加---

<Grid.ColumnDefinitions> 
     <ColumnDefinition Width="Auto" MinWidth="180"/> 
     <ColumnDefinition Width="Auto" MinWidth="115"/>   
</Grid.ColumnDefinitions> 

由於您使用在主窗口這樣

<Button Grid.Column="1" Grid.Row="0" MinWidth="180">Column 1</Button> 
<Button Grid.Column="2" Grid.Row="0" MinWidth="115">Column 2</Button> 

Answer 2

您可以使用SharedSizeGroup做到這一點。這使您可以鏈接多個網格中指定列的寬度。 （它也適用於行高！）

首先，您需要在包含所有將共享寬度的列的控件上定義SharedSizeScope。您可以使用您的YeahGrid爲此：

<Grid Tag="YeahGrid" Name="grid" Grid.IsSharedSizeScope="True"> 

然後在要對齊的列上設置SharedSizeGroup屬性。在窗口：

<Grid.ColumnDefinitions> 
    <ColumnDefinition Width="Auto"/> 
    <ColumnDefinition Width="Auto" Tag="Hallelujah" x:Name="ColDef2" SharedSizeGroup="HallelujahSSG" /> 
    <ColumnDefinition Width="Auto"/> 
    <ColumnDefinition Width="*"/> 
</Grid.ColumnDefinitions> 

而且在用戶控件：

<Grid.ColumnDefinitions> 
    <ColumnDefinition Width="Auto" SharedSizeGroup="HallelujahSSG"/> 
    <ColumnDefinition Width="Auto"/> 
</Grid.ColumnDefinitions> 

現在用同樣的SharedSizeGroup名稱的所有網格列的寬度有聯繫，有效地綁定到該列的寬度，需要最空間（在這種情況下，YeahGrid中的列1）。