Привязать ширину столбца программно в UWP?

Я пытаюсь создать столбцы, размер которых может быть изменен пользователем во время выполнения, как в 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>

person vnmendoza    schedule 28.07.2020    source источник


Ответы (1)


Как я могу привязать ширину столбца программно, а не в XAML

Вы можете подписаться на событие SizeChanged каждого TextBlock без использования Binding, когда вы измените размер столбца, будет запущено событие SizeChanged, после чего вы сможете изменить ширину столбцов, которые вы создали в коде программной части. Вы можете установить ActualWidth ColumnDefinition, созданного вами в xaml, равной ширине 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);
    }
}

Кроме того, элемент управления XAML DataGrid может изменять размер столбцов во время выполнения. , вы можете использовать его непосредственно для создания формата таблицы.

person Faywang - MSFT    schedule 29.07.2020