简体   繁体   English

C#WPF网格/网格拆分器

[英]C# WPF Grid/GridSplitter

What I want to have: 我想要的是:

  • a Grid-Splitter with 3 Columns 3列的网格拆分器
  • the MinWidth for all 3 Columns should work 所有3列的MinWidth应该起作用
  • the left and the right column should have a "defaultSize" like 100 and 200 左列和右列应具有“ defaultSize”,例如100和200
  • when I resize the Form, only the column in the middle should resize. 当我调整窗体的大小时,只有中间的列应该调整大小。 the columns on the left and on the right should stay the same size 左右列应保持相同大小
  • if I add controls to the form, i want them to change their size according to the splitter 如果我将控件添加到窗体,我希望它们根据拆分器更改其大小

What I have: 我有的:

  • I have a Grid with 3 Columns 我有3列的网格
  • the MinWidth for all 3 Columns works, but only with the ColumnWidth="*" 所有3列的MinWidth均有效,但仅适用于ColumnWidth =“ *”
  • I dont know how to set a "DefaultSize" for the left and right column, because if I change the ColumnWidth, the MinWidth doesnt work anymore 我不知道如何为左右列设置“ DefaultSize”,因为如果更改了ColumnWidth,MinWidth将不再起作用
  • when I resize the form, all 3 Columns change their size, not only the column in the middle 当我调整表单大小时,所有3列都会更改其大小,而不仅是中间的列

     <ToolBarTray DockPanel.Dock="Top" IsLocked="True" Background="Pink"> <ToolBar Height="26" Background="Beige"> </ToolBar> </ToolBarTray> <StatusBar DockPanel.Dock="Bottom" Height="23" Background="Orange"/> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" MinWidth="50"/> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width ="*" MinWidth="100"/> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*" MinWidth="50"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="*"/> </Grid.RowDefinitions> <GridSplitter Grid.Column="1" Width="5" ShowsPreview="True" Background="Red" HorizontalAlignment="Center" VerticalAlignment="Stretch"/> <GridSplitter Grid.Column="3" Width="5" ShowsPreview="True" Background="Red" HorizontalAlignment="Center" VerticalAlignment="Stretch"/> </Grid> 

Thanks so far :) 到目前为止谢谢:)

set the width (default size) for left and right column and it should be work 设置左右栏的宽度(默认大小),应该可以

<Grid>
  <StatusBar Height="23" Background="Orange" DockPanel.Dock="Bottom"/>
  <Grid>
     <Grid.ColumnDefinitions>
        <ColumnDefinition MinWidth="50" Width="200"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition MinWidth="100" Width="*"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition MinWidth="50" Width="200"/>
     </Grid.ColumnDefinitions>
     <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
     </Grid.RowDefinitions>
     <GridSplitter
        Width="5"
        Grid.Column="1"
        HorizontalAlignment="Center"
        VerticalAlignment="Stretch"
        Background="Red"
        ShowsPreview="True"/>
     <GridSplitter
        Width="5"
        Grid.Column="3"
        HorizontalAlignment="Center"
        VerticalAlignment="Stretch"
        Background="Red"
        ShowsPreview="True"/>
  </Grid>
</Grid>

EDIT 编辑

here is a fix for the first grid maxwidth problem 这是第一个网格最大宽度问题的解决方法

<Grid x:Name="Root">
      <Grid.Resources>
        <local:MaxWidthConverter x:Key="MaxWidthConverter" />
      </Grid.Resources>

      <Grid>
        <Grid.ColumnDefinitions>
          <ColumnDefinition MinWidth="50"
                            Width="200"
                            MaxWidth="{Binding ElementName=Root, Path=ActualWidth, Mode=OneWay, Converter={StaticResource MaxWidthConverter}, ConverterParameter=260}" />
          <ColumnDefinition Width="Auto" />
          <ColumnDefinition MinWidth="200"
                            Width="*" />
          <ColumnDefinition Width="Auto" />
          <ColumnDefinition MinWidth="50"
                            Width="200" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
          <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <GridSplitter Width="5"
                      Grid.Column="1"
                      HorizontalAlignment="Center"
                      VerticalAlignment="Stretch"
                      Background="Red"
                      ShowsPreview="True" />
        <GridSplitter Width="5"
                      Grid.Column="3"
                      HorizontalAlignment="Center"
                      VerticalAlignment="Stretch"
                      Background="Red"
                      ShowsPreview="True" />
      </Grid>
    </Grid>

simple converter to calculate the maxwidth for the first column (260 = 200 minwidth + 50 minwidth + 5 splitter width + 5 splitter width 简单的转换器来计算第一列的最大宽度(260 = 200 minwidth + 50 minwidth + 5 splitter width + 5 splitter width

public class MaxWidthConverter : IValueConverter
{
  public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
  {
    double minWidth;
    if (value is double && parameter is string && double.TryParse((string)parameter, NumberStyles.Any, CultureInfo.InvariantCulture, out minWidth)) {
      var maxWidth = (double)value - minWidth;
      return maxWidth < 0 ? 0 : maxWidth;
    }
    return 0;
  }

  public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
  {
    return DependencyProperty.UnsetValue;
  }
}

在此处输入图片说明

在此处输入图片说明

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM