标签: gridsplitter

我想为我的GridSplitter设置样式,就像添加点一样(如http://msdn.microsoft.com/en-us/library/aa970265.aspx上所示).

我还想在mouseOver上更改gridsplitter颜色,或者应用Aero Theme.

<Style x:Key="GridSplitterStyle1" TargetType="{x:Type GridSplitter}">
  <Setter Property="Background"
          Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
  <Setter Property="PreviewStyle">
    <Setter.Value>
      <Style>
        <Setter Property="Control.Template">
          <Setter.Value>
            <ControlTemplate>
              <Rectangle Fill="#80000000"/>
            </ControlTemplate>
          </Setter.Value>
        </Setter>
      </Style>
    </Setter.Value>
  </Setter>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type GridSplitter}">
        <Border Background="{TemplateBinding Background}"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"/>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<!--Theme-->
<ResourceDictionary.MergedDictionaries>
  <ResourceDictionary 
   Source="/RibbonControlsLibrary;component/Themes/Office2007Blue.xaml" />
</ResourceDictionary.MergedDictionaries>

<GridSplitter x:Name="gridSplitterTreeNodes" Width="10"
              BorderThickness="1,0" Cursor="SizeWE"
              RenderTransformOrigin="-1.2,0.507" ShowsPreview="True" 
              Style="{DynamicResource GridSplitterStyle1}">
  <GridSplitter.Background>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
      <GradientStop Color="#FFE3EFFF" Offset="0"/>
      <GradientStop Color="#FFAFD2FF" Offset=".45"/>
    </LinearGradientBrush>
  </GridSplitter.Background>
</GridSplitter>

鉴于以下XAML,我如何让gridsplitter尊重给第3行的MinHeight并将内容保留在我的窗口内？

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition MinHeight="40" />
    </Grid.RowDefinitions>
    <Expander Grid.Row="0" ExpandDirection="Down" VerticalAlignment="Top">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" MinHeight="40" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Border Grid.Row="0" MinHeight="100" Background="Black" />
            <GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Background="LightBlue" ResizeBehavior="PreviousAndCurrent" />
        </Grid>
    </Expander>
    <Expander Grid.Row="1" ExpandDirection="Down" VerticalAlignment="Top">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" MinHeight="40" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Border Grid.Row="0" MinHeight="100" Background="Black" />
            <GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Background="LightBlue" ResizeBehavior="PreviousAndCurrent" />
        </Grid>
    </Expander>
    <Border DockPanel.Dock="Bottom"  Grid.Row="2" Background="Lime" MinHeight="30" >
        <TextBlock Text="{Binding RelativeSource={RelativeSource …

我正在努力让这个在我正在研究的WPF应用程序中工作.基本上,我所追求的是像MMC中的任务窗格:

• 该应用程序在显示屏的主要部分有三列.我需要右侧的一个可调整大小的列.我认为这意味着使用带有GridSplitter的Grid,但任何有效的东西都可以.
• 我希望能够在关闭应用程序时保存右侧列的宽度,并在应用程序打开时加载它但这应该是初始大小:用户应该能够调整它的大小.
• 当我调整窗口大小时,我希望左侧和右侧列保持相同的大小,而中间列则根据窗口宽度调整大小.
• 左侧和右侧列需要具有最小宽度.当我调整右侧列的大小时,我希望中心列变小但不是左侧列.
• 我还希望能够使用位于列外部的切换按钮切换右侧列的可见性,当它返回到可见性时,我希望它与之前的宽度相同.

我试图在XAML和绑定中尽可能多地做.

我能为它加上奶油,冰淇淋和巧克力片吗？:-)

我有一个带有3列网格的应用程序.第一列和第二列之间的网格分割器工作得很好.为了使分离器在第二和第三列之间,我为分离器制作了一列.(所以现在第三列真的是第四列.)

当我调整其他列的大小也缩小.我认为这是因为我将它们设置为相对大小.但我不知道如何解决它.

这是我的问题的XAML Pad Ready示例.将其插入XAML板,然后尝试将最后一列调整为更小.

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>
        <StackPanel Background="#feca00" Grid.Column="0">
            <TextBlock FontSize="35" Foreground="#58290A"
                   TextWrapping="Wrap">Left Hand Side</TextBlock>
        </StackPanel>
        <GridSplitter Width="10" />
        <Border CornerRadius="10" BorderBrush="#58290A"
              BorderThickness="5" Grid.Column="1">
            <TextBlock FontSize="25" Margin="20" Foreground="#FECA00"
                   TextWrapping="Wrap">Right Hand Side</TextBlock>
        </Border>
        <GridSplitter Grid.Column="2" HorizontalAlignment="Right"  VerticalAlignment="Stretch" Width="5"></GridSplitter>
        <TabControl Grid.Column="3" Name="tabControl1">
            <TabItem Header="Add Links" Name="tabAddLinks">
                <Grid></Grid>
            </TabItem>
        </TabControl>
    </Grid>
</Page> 

谢谢您的帮助!

编辑:有人建议在他们自己的列中同时使用分离器可能会修复它.我试过了,现在第一个分离器也像第二个分离器一样缩小了列.

以下是该示例的XAML Pad代码:

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="Auto" …

我想要一个有两行的网格布局和它们之间的分割器.行的最小高度应为80像素.

这段代码效果很好:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" MinHeight="80" />
        <RowDefinition Height="5" />
        <RowDefinition Height="*" MinHeight="80" />
    </Grid.RowDefinitions>
    <TextBlock Grid.Row="0" Text="{Binding Path=ActualHeight, RelativeSource={RelativeSource Self}}" />
    <GridSplitter Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="Red" />
    <TextBlock Grid.Row="2" Text="{Binding Path=ActualHeight, RelativeSource={RelativeSource Self}}" />
</Grid>

但我希望顶行有一个自动高度,直到用户使用拆分器手动更改它.所以我把代码更改为:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" MinHeight="80" />
        <RowDefinition Height="5" />
        <RowDefinition Height="*" MinHeight="80" />
    </Grid.RowDefinitions>
    <TextBlock Grid.Row="0" Text="{Binding Path=ActualHeight, RelativeSource={RelativeSource Self}}" />
    <GridSplitter Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="Red" />
    <TextBlock Grid.Row="2" Text="{Binding Path=ActualHeight, RelativeSource={RelativeSource Self}}" />
</Grid>

而且有一个问题.Splitter仍然满足行约束,但如果我将分割器拖得太低,它会无限地开始增加顶行的高度.这导致底行完全低于窗口的底部边框.

我在GridSplitter代码上做了一些Reflector,看看如果行有Auto或Star高度它会使用不同的逻辑.

任何建议如何"修复"它？

我想要一个像可调整大小的扩展器.我的基本想法是这样的:

<Grid HorizontalAlignment="Left">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="2" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <Expander Grid.Column="0" ExpandDirection="Right">
          ...
    </Expander>

    <GridSplitter Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />

    ...
</Grid>

问题是:如果我移动网格分割器并折叠扩展器,我会得到一个很大的空白区域.如何使整个列崩溃？或者是否有另一种方法可以使扩展器"可调整大小"

我想在像素数量上设置一些限制/边界,我们可以拉伸网格内的网格划分器控件.这怎么可能？基本上不应该允许将网格划分器拉到很大的限制(它应该限制在较小的网格边界)

我想要一个像VS 2008这样的布局.我想要两列和第二列再分成两列.

我在下面提到的xaml中做到了这一点,但是GridSplitter垂直不可见(分割两列).

我希望这两个GridSplitters都可以调整大小.一个GridSplitter调整左手窗格和右手窗格的GridSplitter大小,另一个调整子网格的顶部窗格和右窗格的大小.

第二个GridSplitter是通过这个XAML,但我无法生成拆分右手窗格和左手窗格的XAML代码..请帮助!!

<Window x:Class="AlarmUI_2.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <StackPanel Background="Aqua" Grid.Column="0" >
            <TextBlock FontSize="35" Foreground="#58290A" 
                       TextWrapping="Wrap">Left Hand Side</TextBlock>
        </StackPanel>
        <GridSplitter Grid.Column="0" ResizeDirection="Auto" 
                      Grid.RowSpan="1" 
                      HorizontalAlignment="Stretch" 
                      VerticalAlignment="Center"/>
        <Grid Grid.Column="1">
            <Grid.RowDefinitions>            
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <ListBox Grid.Row="0" Background="Red">
                <ListBoxItem>Hello</ListBoxItem>
                <ListBoxItem>World</ListBoxItem>
            </ListBox>
            <GridSplitter Grid.Row="1" Height="5" Background="Gray"
                          VerticalAlignment="Top" HorizontalAlignment="Stretch" />
            <ListBox Grid.Row="1" Background="Violet" Margin="0,5,0,0">
                <ListBoxItem>Hello</ListBoxItem>
                <ListBoxItem>World</ListBoxItem>
            </ListBox>
        </Grid>
    </Grid>
</Window>

我正在创建一个3列UI,列之间有网格分割器.我需要保存列的状态,以便在用户关闭并重新打开应用程序时,它看起来就像是他们离开了它.但我也试图让柱子按比例分割 - 我的意思是,如果你拉伸窗口,所有三个面板都会增长,如果你移动左边的分割器,它会改变左边和中间列之间的分割.

我目前只实现了第一个要求 - 它保存了列宽的状态.我还使列强制所有三列的最小宽度.但据我了解,告诉拆分器按比例分割的方法是使用星形大小的列宽.由于我已经使用Width属性来保存和恢复状态,我不确定我能否达到我想要的目标.

有没有人设法保存列宽的状态并且拆分成比例？

这是我目前所拥有的一些代码:

   <Grid x:Name="mainGrid" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="leftColumn" Width="{Binding MainWindowLeftColumnWidth, Mode=TwoWay, Source={x:Static prop:Settings.Default}}" MinWidth="200" MaxWidth="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:MainWindow}}, Path=LeftColumnMaxWidth, Mode=OneWay}"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition x:Name="centerColumn" Width="{Binding MainWindowCenterColumnWidth, Mode=TwoWay, Source={x:Static prop:Settings.Default}}" MinWidth="300" MaxWidth="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:MainWindow}}, Path=CenterColumnMaxWidth, Mode=OneWay}"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition x:Name="rightColumn" Width="*" MinWidth="500"/>
        </Grid.ColumnDefinitions>
        <StackPanel x:Name="leftPanel" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0"/>
        <GridSplitter x:Name="leftSplitter" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Stretch" ResizeBehavior="PreviousAndNext" Width="5" ResizeDirection="Columns"/>
        <StackPanel x:Name="centerPanel" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0"/>
        <GridSplitter x:Name="rightSplitter" Grid.Column="3" HorizontalAlignment="Center" VerticalAlignment="Stretch" ResizeBehavior="PreviousAndNext" Width="5" ResizeDirection="Columns"/> …

我希望有一个简单的3列网格,可调整列,MinWidth为80.

代码如下所示:

<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="120" MinWidth="80"/>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*" MinWidth="80"/>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="120" MinWidth="80"/>
  </Grid.ColumnDefinitions>
  <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Center" />
  <GridSplitter Grid.Column="3" Width="5" HorizontalAlignment="Center" />
</Grid>

但它不能按我想要的方式工作.当分离器被推到左侧时,一切正常.当第二个分离器向右推时,一切正常.但是如果第一个分离器被推到右侧,它会将第3列和第二个分离器推出网格(或使其宽度= 0).

我使用单独的列作为gridsplitters,就像它在msdn示例中所做的那样:

<Grid.ColumnDefinitions>
  <ColumnDefinition/>
  <ColumnDefinition Width="Auto" />
  <ColumnDefinition/>
</Grid.ColumnDefinitions>
...
<GridSplitter Grid.Column="1"
      HorizontalAlignment="Center"
      VerticalAlignment="Stretch"
      Background="Black" 
      ShowsPreview="True"
      Width="5"
      />

我还将对齐设置为居中,因为我在某处读取了右对齐可能是一个问题并尝试了不同的ResizeBehaviors.

有谁知道,如何解决这个问题,以便始终可见3列宽度至少为80px？

谢谢你的帮助