在 UWP 中以编程方式绑定列宽？

Question

我正在尝试创建可以在运行时由用户调整大小的列，就像在 excel 中一样。但是，我正在动态创建字段并且不知道如何将编程创建的列的宽度绑定到我在 xaml 中创建的列的宽度。

问题：如何以编程方式而不是在 XAML 中绑定列宽？

cs:

public sealed partial class WepPage : Page
    {
        static int i = 0;
        Grid grid;
       
        
    public WepPage()
    {
        this.InitializeComponent();
   
    }
    private void AddWepButton_Click(object sender, RoutedEventArgs e)
    {
        addWepStack();    
    }
    private void addWepStack()
    {
       
        grid = new Grid();
        grid.Name = ("ItemGrid" + i.ToString()); 
        WepStackPanel.Children.Add(grid);
        //create columns
        ColumnDefinition col0 = new ColumnDefinition();
        ColumnDefinition col1 = new ColumnDefinition();
        ColumnDefinition col2 = new ColumnDefinition();
        ColumnDefinition col3 = new ColumnDefinition();
        ColumnDefinition col4 = new ColumnDefinition();
        ColumnDefinition col5 = new ColumnDefinition();
        // Set the width of each column
       
        //HERE IS WHERE I WANT TO BIND THE COLUMN WIDTH TO THE WIDTH OF THE HEADERS 
        //SO THE USERS CAN CHANGE THE COLUMN WIDTH WHILE THE APPLICATION IS RUNNING.

        // Add columns to grid
        grid.ColumnDefinitions.Add(col0);
        grid.ColumnDefinitions.Add(col1);
        grid.ColumnDefinitions.Add(col2);
        grid.ColumnDefinitions.Add(col3);
        grid.ColumnDefinitions.Add(col4);
        grid.ColumnDefinitions.Add(col5);

        i++;
    }

}

XAML：

<Page NavigationCacheMode="Required"
    x:Class="WASP.WepPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WASP"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">


    <Page.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="PoleDictionary.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Page.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
         <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" x:Name="WepNumColumn" x:DefaultBindMode="OneWay"/>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
    
    <!-- HERE IS WHERE I ADDED GRID SPLITTERS SO THE USERS CAN EDIT COLUMN WIDTH
    THIS IS WHAT I WANT THE WIDTH OF THE OTHER COLUMNS BOUND TO-->
    
        <controls:GridSplitter Grid.Column="1">
        <controls:GridSplitter.RenderTransform>
            <TranslateTransform X="-8" />
        </controls:GridSplitter.RenderTransform>
        </controls:GridSplitter>
        <controls:GridSplitter Grid.Column="3">
            <controls:GridSplitter.RenderTransform>
                <TranslateTransform X="-8" />
            </controls:GridSplitter.RenderTransform>
        </controls:GridSplitter>
        <controls:GridSplitter Grid.Column="5">
            <controls:GridSplitter.RenderTransform>
                <TranslateTransform X="-8" />
            </controls:GridSplitter.RenderTransform>
        </controls:GridSplitter>
        <controls:GridSplitter Grid.Column="7">
            <controls:GridSplitter.RenderTransform>
                <TranslateTransform X="-8" />
            </controls:GridSplitter.RenderTransform>
        </controls:GridSplitter>

        <Button x:Name="addWepButton" 
                Content="+" 
                FontSize="30"  
                Grid.Column="10"
                Grid.Row="0"
                Click="AddWepButton_Click" />
        <TextBlock Text="WEP #"
                   Grid.Column="0"
                   Grid.Row="0" 
                   Style="{StaticResource WepTextBlock}"/>
        <TextBlock Text="Type"
                   Grid.Column="2"
                   Grid.Row="0" 
                   Style="{StaticResource WepTextBlock}"/>
        <TextBlock Text="Distance"
                   Grid.Column="4"
                   Grid.Row="0"  
                   Style="{StaticResource WepTextBlock}"/>
        <TextBlock Text="Direction"
                   Grid.Column="6"
                   Grid.Row="0"  
                   Style="{StaticResource WepTextBlock}"/>
        <TextBlock Text="Flip"
                   Grid.Column="8"
                   Grid.Row="0"  
                   Style="{StaticResource WepTextBlock}"/>

        <ScrollViewer Grid.Row="1" Grid.ColumnSpan="20">
            <StackPanel x:Name="WepStackPanel">
                
            </StackPanel>
        </ScrollViewer>
    </Grid>
</Page>

Answer 1

如何以编程方式而不是在 XAML 中绑定列宽

您可以在不使用绑定的情况下订阅每个 TextBlock 的 SizeChanged 事件，当您调整列大小时，将触发 SizeChanged 事件，然后您可以更改您在代码隐藏中创建的列的宽度。您可以将您在 xaml 中创建的 ColumnDefinition 的 ActualWidth 设置为您在代码隐藏中创建的 ColumnDefinition 的宽度。例如：

.xaml:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" x:Name="WepNumColumn" x:DefaultBindMode="OneWay"/>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" x:Name="typeColumn"/>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" x:Name="DistanceColumn"/>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" x:Name="DirectionColumn"/>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" x:Name="FlipColumn"/>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <controls:GridSplitter x:Name="MySplitter" Grid.Column="1">
        <controls:GridSplitter.RenderTransform>
            <TranslateTransform X="-8" />
        </controls:GridSplitter.RenderTransform>
    </controls:GridSplitter>
    <controls:GridSplitter Grid.Column="3">
        <controls:GridSplitter.RenderTransform>
            <TranslateTransform X="-8" />
        </controls:GridSplitter.RenderTransform>
    </controls:GridSplitter>
    <controls:GridSplitter Grid.Column="5">
        <controls:GridSplitter.RenderTransform>
            <TranslateTransform X="-8" />
        </controls:GridSplitter.RenderTransform>
    </controls:GridSplitter>
    <controls:GridSplitter Grid.Column="7">
        <controls:GridSplitter.RenderTransform>
            <TranslateTransform X="-8" />
        </controls:GridSplitter.RenderTransform>
    </controls:GridSplitter>

    <Button x:Name="addWepButton" 
            Content="+" 
            FontSize="30"  
            Grid.Column="10"
            Grid.Row="0"
            Click="AddWepButton_Click" />
        <TextBlock Text="WEP #" SizeChanged="WEPTextBlock_SizeChanged"
               Grid.Column="0"
               Grid.Row="0" 
               x:Name="WEPTextBlock" 
              />
        <TextBlock Text="Type" SizeChanged="WEPTextBlock_SizeChanged"
               Grid.Column="2" x:Name="TypeTextBlock" 
               Grid.Row="0" 
               />
        <TextBlock Text="Distance" SizeChanged="WEPTextBlock_SizeChanged"
               Grid.Column="4" x:Name="DistanceTextBlock" 
               Grid.Row="0"  
              />
        <TextBlock Text="Direction" SizeChanged="WEPTextBlock_SizeChanged"
               Grid.Column="6" x:Name="DirectionTextBlock" 
               Grid.Row="0"  
               />
        <TextBlock Text="Flip" SizeChanged="WEPTextBlock_SizeChanged"
               Grid.Column="8" x:Name="FlipTextBlock" 
               Grid.Row="0"  
               />

    <ScrollViewer Grid.Row="1" Grid.ColumnSpan="20">
            <StackPanel x:Name="WepStackPanel">
            </StackPanel>
    </ScrollViewer>
</Grid>

.cs:

private void addWepStack()
{
   ......
    ColumnDefinition col0 = new ColumnDefinition();
    ColumnDefinition col1 = new ColumnDefinition();
    ColumnDefinition col2 = new ColumnDefinition();
    ColumnDefinition col3 = new ColumnDefinition();
    ColumnDefinition col4 = new ColumnDefinition();
        
    // Set the width of each column
    col0.Width = new GridLength(WepNumColumn.ActualWidth);
    col1.Width = new GridLength(typeColumn.ActualWidth);
    col2.Width = new GridLength(DistanceColumn.ActualWidth);
    col3.Width = new GridLength(DirectionColumn.ActualWidth);
    col4.Width = new GridLength(FlipColumn.ActualWidth);
    ......
}


private void WEPTextBlock_SizeChanged(object sender, SizeChangedEventArgs e)
{
    if (grid != null)
    {
        grid.ColumnDefinitions[0].Width = new GridLength(WepNumColumn.ActualWidth);
        grid.ColumnDefinitions[1].Width = new GridLength(typeColumn.ActualWidth);
        grid.ColumnDefinitions[2].Width = new GridLength(DistanceColumn.ActualWidth);
        grid.ColumnDefinitions[3].Width = new GridLength(DirectionColumn.ActualWidth);
        grid.ColumnDefinitions[4].Width = new GridLength(FlipColumn.ActualWidth);
    }
}

另外，DataGrid XAML 控件可以在运行时调整列的大小，您可以直接使用它来创建表格格式。