移动到外部资源时,GridSplitter的行为有所不同(UserControl)

时间:2016-11-08 15:55:41

标签: c# wpf mvvm gridsplitter

由于我的WPF应用程序多次使用GridSplitter,因此我想将该XAML代码段解压缩为单独的UserControl

当然,使用ResourceDictionary会更好。但是这样,我只能为分割器的内容定义ControlTemplate并在之后的Template - 属性中使用它 - 这样就无法仅定义所有这些GridSplitter属性,然后连续使用它们。

GridSplitter UserControl,GridSplitter.xaml:

<GridSplitter HorizontalAlignment="Stretch" Margin="3" ResizeBehavior="PreviousAndNext"
              ResizeDirection="Columns" VerticalAlignment="Stretch">
  <GridSplitter.Template>
    <ControlTemplate TargetType="{x:Type GridSplitter}">
      <Grid>
        <Button Content="⁞" />
        <Rectangle Fill="#00FFFFFF" />
      </Grid>
    </ControlTemplate>
  </GridSplitter.Template>
</GridSplitter>

MainWindow.xaml中的用法:

<Window
         (...)
         xmlns:uc="clr-namespace:Yoda.Frontend.Resources"
         (...)>
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition MinWidth="100" Width="200" />
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition MinWidth="400" Width="*" />
    </Grid.ColumnDefinitions>
    <!-- (...) -->
    <uc:GridSplitter Grid.Column="1" />
    <!-- (...) -->
  </Grid>
    <!-- (...) -->
</Window>

使用上述代码的结果是一个不能向任何方向移动的分离器。

但是,使用上面提到的ResourceDictionary字典方法,我得到一个可移动的GridSplitter 但是,尽管直接在 MainWindow.xaml 中完美地工作,它只会调整第三个网格列的大小。

当然,使用Width时不建议设置GridSplitter。但是,为什么只要在主窗口中定义拆分器并且在用作UserControl时无法执行此操作,它是否有效?如何在MVVM中修复它,没有代码隐藏方式?

1 个答案:

答案 0 :(得分:1)

如果你只有一个漂亮的分割器,你可以使用这个代码:

<Grid.ColumnDefinitions>
     <ColumnDefinition MinWidth="100" Width="Auto" />
     <ColumnDefinition MinWidth="20" Width="Auto" />
     <ColumnDefinition MinWidth="400" Width="Auto" />
</Grid.ColumnDefinitions>
<!-- (...) -->
<GridSplitter Grid.Column="1" Background="Gray" HorizontalAlignment="Stretch"
              VerticalAlignment="Stretch" />
<TextBlock Text="⁞" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center"
           IsHitTestVisible="False" />
<!-- (...) -->

另一种解决方案是将ControlTemplate定义为资源,然后将其用于GridSplitter

<Window.Resources>
    <ControlTemplate TargetType="{x:Type GridSplitter}" x:Key="gridSplitter">
        <Grid Background="Transparent">
            <Button Content="⁞" IsHitTestVisible="False" />
            <Rectangle Fill="#00FFFFFF" IsHitTestVisible="False" />
        </Grid>
    </ControlTemplate>
</Window.Resources>
<Grid>
    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Blue">
        <Grid.ColumnDefinitions>
            <ColumnDefinition MinWidth="100" Width="Auto" />
            <ColumnDefinition MinWidth="20" Width="Auto" />
            <ColumnDefinition MinWidth="400" Width="Auto" />
        </Grid.ColumnDefinitions>
        <!-- (...) -->
        <GridSplitter Grid.Column="1" Template="{StaticResource gridSplitter}" />
        <!-- (...) -->
    </Grid>
    <!-- (...) -->
</Grid>

如果你真的想在分割器模板中使用set属性,还有一个解决方案:使用样式添加它们。它看起来像这样:

<Window.Resources>
    <ControlTemplate TargetType="{x:Type GridSplitter}" x:Key="gridSplitter">
        <Grid Background="Transparent">
            <Button Content="⁞" IsHitTestVisible="False"/>
            <Rectangle Fill="#00FFFFFF" IsHitTestVisible="False"/>
        </Grid>
    </ControlTemplate>
    <Style TargetType="{x:Type GridSplitter}" x:Key="styleGridSplitter">
        <Setter Property="Template" Value="{StaticResource gridSplitter}" />
        <Setter Property="ResizeBehavior" Value="PreviousAndNext" />
        <Setter Property="ResizeDirection" Value="Columns" />
        <Setter Property="VerticalAlignment" Value="Stretch" />
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="Margin" Value="3" />
    </Style>
</Window.Resources>
<Grid>
    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Blue">
        <Grid.ColumnDefinitions>
            <ColumnDefinition MinWidth="100" Width="Auto" />
            <ColumnDefinition MinWidth="20" Width="Auto" />
            <ColumnDefinition MinWidth="400" Width="Auto" />
        </Grid.ColumnDefinitions>
        <!-- (...) -->
        <GridSplitter Grid.Column="1" Style="{StaticResource styleGridSplitter}"/>
        <!-- (...) -->
    </Grid>
    <!-- (...) -->
</Grid>