WPFを使用してグリッドの列とテキストのサイズを変更

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

正しく理解している場合は、TextBlockの列のサイズを変更し、フォントサイズのサイズを変更する必要があります。これを行うには、イベントを使用する必要があります。理想的にはColumnDefinitionのそれぞれでSizeChangedイベントを使用したいと考えていますが、そのイベントはありません。私は考えることができる

最善の解決策は、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アライメントを設定してください取り扱います。これがあなたが探しているものだと願っています

Answer 2

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*にサイズ変更動作が変更されます。私が話していることを知るためにそれを試してみてください。だから私はwidth = 100に設定した。
• 投稿したGridに1行しかないので、GridSplitterからGrid.Row="1"を削除してください。

希望すると、これが役立ちます。