0

ToggleButtonを押して非表示にし、ユーザーがGridSplitterコントロールを使用してマウスでサイズを変更できるサイドバーが欲しいのですが。結局、私はそれがこのように見えることを望みます：

（写真1をご覧ください）

と：

（写真2をご覧ください）

これは私がこれまでに持っているものです：

<Grid>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<GridSplitter Grid.Column="1" HorizontalAlignment="Left" Width="4"
 BorderThickness="1,0" Foreground="{x:Null}" Background="#01000000" BorderBrush="{DynamicResource ColorControlBorder}"/>
<Grid x:Name="grid" Grid.Column="1" Margin="4,0,0,0" Background="{DynamicResource IconErrorFilter}" RenderTransformOrigin="0.5,0.5">
    <Grid.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform/>
            <TranslateTransform/>
        </TransformGroup>
    </Grid.RenderTransform>
    <Expander x:Name="expander2" Style="{DynamicResource AddExpanderStyle}" 
        ExpandDirection="Up" Background="#D8FFFFFF" BorderBrush="{DynamicResource ColorControlBorder}"
        DataContext="{Binding FilterTypesPMod}" d:LayoutOverrides="Height" VerticalAlignment="Bottom">
        <Expander.Resources>
            <CollectionViewSource x:Key="CollectionFilterTypes" Source="{Binding FilterTypes}">
                <CollectionViewSource.SortDescriptions>
                    <ComponentModel:SortDescription PropertyName="Order" Direction="Ascending" />
                </CollectionViewSource.SortDescriptions>
            </CollectionViewSource>
        </Expander.Resources>
        <Grid>
            <ItemsControl BorderThickness="0" Background="Transparent" BorderBrush="Transparent"
                ItemsSource="{Binding Source={StaticResource CollectionFilterTypes}}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Bla... />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </Grid>
    </Expander>
</Grid>
<ToggleButton x:Name="toggleButton" Grid.Column="1" HorizontalAlignment="Left" Style="{DynamicResource CollapsingToggleButtonStyle}" Background="{DynamicResource ColorMainForeground}" RenderTransformOrigin="0.5,0.5">
    <ToggleButton.LayoutTransform>
        <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform/>
            <TranslateTransform/>
        </TransformGroup>
    </ToggleButton.LayoutTransform>
</ToggleButton>

GridSplitterなしで使用すると、正常に機能します（サイズ変更を除く）。ToggleButtonを押すと、Grid'grid'のコンテンツが消え、GridColumn（1）が小さくなり、GridColumn（0）用のスペースが増えます。しかし、GridSplitterを挿入するとすぐに、自動サイズ変更が停止します。誰かがこれを解決する方法を知っていますか？

4

2 に答える 2

0

私はあなたのシナリオを再現しようとしましたが、あなたのケースで何が起こっているのか理解したようです。これがあなたの問題です-

使用するだけの場合ToggleButton、列は正しく展開/折りたたまれます。を使用するGridSplitterと、正しく展開/折りたたまれます。ただし、使用GridSplitterしてから使用しようとするとToggleButton 、列が正しく縮小されません。

これが、問題を再現するために使用したxamlです。

その理由は、を使用するGridSplitterと、列の幅が固定値に変更されるためです。そのため、<ColumnDefinition Width="Auto"/>はもう当てはまりません。固定値に変更されます<ColumnDefinition Width="154"/>。これで、その列内のコンテンツが折りたたまれても、列の幅は固定されたままになります（つまり、154）。これは、SNOOPを使用して簡単に確認できます。

これに対する1つの解決策は、2番目の列の幅をAutoToggleButtonが押されたとき（アニメーションまたはコードのいずれかを介して）に変更することです。アニメーションで列の幅を設定するのは簡単ではありませんがGridLengthAnimation、これらのSOの質問で説明されているように、いくつかの回避策（作成）が利用可能です-

アニメーション時にグリッド列の幅が変わる

WPFで、グリッドをアニメーション化した人はいますか？

于 2012-07-10T13:36:26.457 に答える
0

この質問と同じ問題が発生しているようです。

GridSplitterはRowDefinitionスタイルを無効にします

akjoshiが説明したように、GridSplitterは行のHeightプロパティ（列のWidthプロパティ）を変更します。GridSplitterを使用して行または列のサイズを変更した後で、HeightまたはWidthプロパティの値のソースを確認すると、「ローカル」に設定されていることがわかります。「ローカル」値は、スタイル、テンプレート、またはトリガーによって設定された値を上書きします。HeightまたはWidthプロパティをクリアすると、トリガーやスタイルを使用して、HeightまたはWidthプロパティを再度設定できます。

于 2013-09-27T23:56:52.177 に答える