8

トップレベルのレイアウトにグリッドを使用したいと考えています。グリッドには 1 列と n 行があります。グリッドの各行には、3 つの列と 1 つの行を持つグリッドも含まれている必要があります。2 番目の列には GridSplitter があり、ネストされたすべてのグリッドで最初の列のサイズが変更されるように、SharedSizeGroup を使用しようとしています。

これが私が持っているものです...そしてそれは機能します!!...まあまあ...スプリッターをクリックして、手放さずにサイズを変更すると機能します...しかし、何かのサイズを変更して手放すと、何らかの理由でマウスをクリックしてから、別の行を使用してサイズを変更しようとすると、「くっつく」ように見えます。

何か案は？

<!-- Parent Grid -->
<Grid Grid.IsSharedSizeScope="True">
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>

    <!-- First Grid -->
    <Grid Grid.Row="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition SharedSizeGroup="A" Width="Auto"></ColumnDefinition>
            <ColumnDefinition SharedSizeGroup="B" Width="Auto"></ColumnDefinition>
            <ColumnDefinition SharedSizeGroup="C" Width="Auto"></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <Label Grid.Column="0">One-Left</Label>
        <GridSplitter Grid.Column="1" Width="5" Background="DarkGray"></GridSplitter>
        <Label Grid.Column="2">One-Right</Label>
    </Grid>

    <!-- Second Grid -->
    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition SharedSizeGroup="A" Width="Auto"></ColumnDefinition>
            <ColumnDefinition SharedSizeGroup="B" Width="Auto"></ColumnDefinition>
            <ColumnDefinition SharedSizeGroup="C" Width="Auto"></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <Label Grid.Column="0">Two-Left</Label>
        <GridSplitter Grid.Column="1" Width="5" Background="DarkGray"></GridSplitter>
        <Label Grid.Column="2">Two-Right</Label>
    </Grid>

</Grid>
4

3 に答える 3

12

ms connectからの回答の再投稿:

通常、これを回避するには、SharedSizeGroup を使用せず、代わりにすべての共有サイズを 1 つのオブジェクト (たとえば、データ コンテキスト) の単一のプロパティにバインドします。

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:my="clr-namespace:WpfApplication3"
        Height="350" Width="525" Title="MainWindow">

    <Window.DataContext>
        <my:MainWindowData Width0="1*" Width1="1*" />
    </Window.DataContext>

    <Window.Resources>

        <DataTemplate x:Key="dt">
         <Grid>
            <Grid.ColumnDefinitions>
             <ColumnDefinition Width="{Binding Path=Width0, Mode=TwoWay}" />
             <ColumnDefinition Width="Auto" />
             <ColumnDefinition Width="{Binding Path=Width1, Mode=TwoWay}" />
            </Grid.ColumnDefinitions>
            <Button Grid.Column="0" Content="{Binding Width0}" />
            <GridSplitter Grid.Column="1" Width="10" ResizeBehavior="PreviousAndNext" ResizeDirection="Columns" />
            <Button Grid.Column="2" Content="{Binding Width1}" />
         </Grid>
        </DataTemplate>

    </Window.Resources>

    <StackPanel>
        <ContentPresenter Content="{Binding}" ContentTemplate="{StaticResource dt}" />
        <ContentPresenter Content="{Binding}" ContentTemplate="{StaticResource dt}" />
    </StackPanel>

</Window>

ここで、Width0 と Width1 は一致する型 (GridLength) です。あらゆる種類のサイジング (固定、スター、自動) を任意の組み合わせで使用できます。

更新：

または、DataContext にバインドする代わりに、純粋に XAML でバインドすることもできます。名前付きの列を持つ単一のマスター グリッド (親である必要はありませんが、それを参照する方法が必要です) を定義し、名前でそれらにバインドするだけです。

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Height="350" Width="525" Title="MainWindow">

    <!-- shared sizing used only on fixed size columns therefore safe -->
    <!-- alternatively you can hardcode width of splitter column -->
    <Grid Name="masterGrid" Grid.IsSharedSizeScope="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" Name="masterColumn0" />
            <ColumnDefinition Width="Auto" SharedSizeGroup="masterColumn1" />
            <ColumnDefinition Width="1*" Name="masterColumn2" />
        </Grid.ColumnDefinitions>
        <StackPanel Grid.ColumnSpan="3">
            <StackPanel.Resources>
                <DataTemplate x:Key="dt">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="{Binding Path=Width, Mode=TwoWay, ElementName=masterColumn0}" />
                            <ColumnDefinition Width="Auto" SharedSizeGroup="masterColumn1" />
                            <ColumnDefinition Width="{Binding Path=Width, Mode=TwoWay, ElementName=masterColumn2}" />
                        </Grid.ColumnDefinitions>
                        <Button Grid.Column="0" Content="{Binding Path=Width, Mode=TwoWay, ElementName=masterColumn0}" />
                        <Button Grid.Column="2" Content="{Binding Path=Width, Mode=TwoWay, ElementName=masterColumn2}" />
                    </Grid>
                </DataTemplate>
            </StackPanel.Resources>
            <ContentPresenter ContentTemplate="{StaticResource dt}" />
            <ContentPresenter ContentTemplate="{StaticResource dt}" />
        </StackPanel>
        <GridSplitter Grid.Column="1" Width="10" ResizeBehavior="PreviousAndNext" ResizeDirection="Columns" ShowsPreview="True" />
    </Grid>

</Window>

これにより、すべてのグリッドで共有される単一のグリッド スプリッターを使用できるという利点が追加されました。

于 2012-06-26T09:54:27.573 に答える
2

私はこれを再現できますが、正直なところ、バグのようです。具体的には、行 1 の列の幅を広げると、別の行の幅よりも幅を狭くすることはできません。これでもう少し遊んでみるつもりですが...何がそれを修正するのかわかりません。

于 2009-11-11T13:46:50.803 に答える
1

問題がなければ、このソリューションを試してください（Kaxamlでは問題なく動作します）。

<!-- Parent Grid -->
<Grid Grid.IsSharedSizeScope="True">

  <Grid.RowDefinitions>
    <RowDefinition></RowDefinition>
    <RowDefinition></RowDefinition>
  </Grid.RowDefinitions>

  <Grid.ColumnDefinitions>
    <ColumnDefinition SharedSizeGroup="A" Width="Auto"></ColumnDefinition>
    <ColumnDefinition Width="Auto"></ColumnDefinition>
    <ColumnDefinition SharedSizeGroup="C" Width="Auto"></ColumnDefinition>
  </Grid.ColumnDefinitions>

  <Label Grid.Column="0" Grid.Row="0">One-Left</Label>
  <Label Grid.Column="0" Grid.Row="1">Two-Left</Label>
  <GridSplitter Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" Width="5" Background="DarkGray"></GridSplitter>
  <Label Grid.Column="2" Grid.Row="0">One-Right</Label>
  <Label Grid.Column="2" Grid.Row="1">Two-Right</Label>

</Grid>

お役に立てれば

于 2011-12-05T09:21:02.417 に答える