Question

我仍然是Xaml和WPF的新手。我正在尝试创建一个包含网格的用户控件。一方面，它将以固定位置开始，但具有网格分割器的用户可以调整列的大小。

我不知道该怎么做。在我下面写的代码中，用户可以更改列，但文本随列更改。

我希望有一个解决方案，谢谢。

 <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"></ColumnDefinition>
            <ColumnDefinition Width="5"></ColumnDefinition>
            <ColumnDefinition Width="60"></ColumnDefinition>
            <ColumnDefinition Width="5"></ColumnDefinition>
            <ColumnDefinition Width="150"></ColumnDefinition>
            <ColumnDefinition Width="5"></ColumnDefinition>
            <ColumnDefinition Width="100"></ColumnDefinition>
            <ColumnDefinition Width="5"></ColumnDefinition>
            <ColumnDefinition Width="100"></ColumnDefinition>
            <ColumnDefinition Width="5"></ColumnDefinition>
            <ColumnDefinition Width="1*"></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <TextBlock x:Name="TBDatanTime" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="0" Foreground="White" Text="{Binding DataAndTime }" ></TextBlock>
        <GridSplitter Grid.Row="1" Grid.Column="1" Width="1"></GridSplitter>
        <TextBlock x:Name="TBComPort" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="2" Foreground="White"  Text="{Binding ComPort }" ></TextBlock>
        <GridSplitter Grid.Row="1" Grid.Column="3" Width="1"></GridSplitter>
        <TextBlock x:Name="TBTranslation" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="4" Foreground="White" Text="{Binding Translation }" ></TextBlock>
        <GridSplitter Grid.Row="1" Grid.Column="5" Width="1"></GridSplitter>
        <TextBlock x:Name="TBTLV" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="6" Foreground="White" Text="{Binding Node_ID }" ></TextBlock>
        <GridSplitter Grid.Row="1" Grid.Column="7" Width="1"></GridSplitter>
        <TextBlock x:Name="TLV_INFO" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="8" Foreground="White" Text="{Binding TLV_INFO }" ></TextBlock>
        <GridSplitter Grid.Row="1" Grid.Column="9" Width="1"></GridSplitter>
        <TextBlock x:Name="TBDataBytesArray" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="10" Foreground="White" Text="{Binding Data_ARR }" ></TextBlock>            
       </Grid>

Answer 1

删除有关如何使用GridSplitter的示例不需要的属性。

<Grid>
     <Grid.ColumnDefinitions>
         <ColumnDefinition Width="100"></ColumnDefinition>
         <ColumnDefinition Width="5"></ColumnDefinition>
         <ColumnDefinition Width="60"></ColumnDefinition>
         <ColumnDefinition Width="5"></ColumnDefinition>
         <ColumnDefinition Width="150"></ColumnDefinition>
         <ColumnDefinition Width="5"></ColumnDefinition>
         <ColumnDefinition Width="100"></ColumnDefinition>
         <ColumnDefinition Width="5"></ColumnDefinition>
         <ColumnDefinition Width="100"></ColumnDefinition>
         <ColumnDefinition Width="5"></ColumnDefinition>
         <ColumnDefinition Width="100"></ColumnDefinition>
     </Grid.ColumnDefinitions>

     <TextBlock Grid.Column="0"
                Text="DataAndTime" />
     <GridSplitter Grid.Column="1"
                   Width="1"/>
     <TextBlock Grid.Column="2" 
                Text="ComPort" />
     <GridSplitter Grid.Column="3"
                   Width="1"/>
     <TextBlock Grid.Column="4"  
                Text="Translation" />
     <GridSplitter Grid.Column="5"
                   Width="1"/>
     <TextBlock Grid.Column="6" 
                Text="Node_ID" />
     <GridSplitter Grid.Column="7" 
                   Width="1"/>
     <TextBlock Grid.Column="8"  
                Text="TLV_INFO" />
     <GridSplitter Grid.Column="9"
                   Width="1"/>
     <TextBlock Grid.Column="10"  
                Text="Data_ARR" />
 </Grid>

对您很重要：

当您将ColumnDefinition设置为*时，调整大小的行为将会改变;试着去了解我在说什么。这就是我设置宽度= 100的原因。
从Grid.Row="1"中移除GridSplitter，因为您发布的Grid中只有一行。

希望这会对你有所帮助。

Answer 2

如果我理解正确，您希望TextBlock使用列调整大小并调整字体大小。为此，您需要使用事件。理想情况下，您希望在每个SizeChanged上使用ColumnDefinition事件，但它们没有该事件。

我能想到的最佳解决方案是将这些事件添加到Grid：

<Grid Name="grid" MouseMove="Grid_MouseMove" MouseDown="Grid_MouseDown" MouseUp="Grid_MouseUp">

由于GridSplitter通过点击和拖动起作用，因此这些事件基本上会捕获它。现在在您的代码中，处理这些事件

// Activates when the mouse is down
private bool drag = false;

public void Grid_MouseDown(object sender, RoutedEventArgs e)
{
    // activate the drag
    drag = true;
}

public void Grid_MouseUp(object sender, RoutedEventArgs e)
{
    // deactivate the drag
    drag = false;
}

public void Grid_MouseMove(object sender, RoutedEventArgs e)
{
    // check if the mouse is down
    if(drag)
    {
         // loop through each of your textblocks and change their width and text if necessary
        for(int i = 0; i < grid.Children.Count; i += 2)
        {
             // access the textblock
             TextBlock textblock = grid.Children[i];
             // set the width to the width of the column it's in
             textblock.Width = grid.ColumnDefinitions(Grid.GetColumn(textblock)).ActualWidth;
             // if you want to change the font size...
             textblock.FontSize = 12;
        }
    }
}

还要确保将TextBlock对齐方式设置为左侧。希望这就是你要找的东西

使用WPF调整网格上的列和文本

2 个答案: