可調整大小和可伸縮的gridColumn與gridSplitter

我想有一個側邊欄，可以通過按下ToggleButton隱藏，並通過使用GridSplitter控件用戶通過鼠標重新調整大小。最後，我想它是這樣的：可調整大小和可伸縮的gridColumn與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，就會停止自動調整大小。有誰知道如何解決這個問題？

來源

2012-07-03 user1498464

需要更多的細節以提供任何幫助。 1.你的很多風格都缺失了。按下切換按鈕時你在做什麼？由於這可能是一個微不足道的問題，如果您可以上傳一個能夠重現問題的小樣本，那將是最好的。 – akjoshi

這聽起來像你有同樣的問題，在這個問題：

GridSplitter disables my RowDefinition style

由於akjoshi闡釋了GridSplitter改變了他行的寬度屬性（列的寬度屬性）。如果在使用GridSplitter調整行或列的大小後檢查Height或Width屬性的值源，則會看到它已設置爲「local」。「本地」值覆蓋由樣式，模板或觸發器設置的任何值。清除高度或寬度屬性允許使用觸發器和/或樣式再次設置高度或寬度屬性。

來源

2013-09-27 23:56:52 roadkill

這是正確的，但我是一年前... :) – user1498464

感謝您的答案。 – user1498464

我試圖重現你的情況，看起來像我理解你的情況發生了什麼。這是你的問題是什麼 -

If you just use ToggleButton then your column would expand/collapse correctly; 
if you use GridSplitter, then too it would expand/cllapse correctly; 
but if you once use GridSplitter and then try and use ToggleButton 
than column won't shrink correctly.

Here XAML是我用來複制的問題。

原因是，一旦您使用GridSplitter，它會將列的寬度更改爲一個固定值，因爲其中< ColumnDefinition Width="Auto"/>不再成立;它被更改爲固定值<ColumnDefinition Width="154"/>。現在，即使該列內的內容被摺疊，列寬也保持不變（即154）。這可以使用SNOOP輕鬆驗證。

解決此問題的方法之一是，當按下切換按鈕（通過動畫或代碼）時，將第二列的寬度更改爲Auto;這不是簡單的通過動畫來設置列的寬度，但一些解決方法（創建GridLengthAnimation）都可以在這些所謂的問題解釋 -

Grid Column changing Width when animating

In WPF, has anybody animated a Grid?

來源

2012-07-10 13:36:26 akjoshi

目前我很忙其他的東西，但我儘快看看它屁股（可能下週開始）但謝謝你回答我......你是對的;我忘了發佈所有styletriggers：我會盡快添加它們... – user1498464

讓我們知道您的發現併發布您的解決方案將會非常棒。 – akjoshi

可調整大小和可伸縮的gridColumn與gridSplitter

回答

相關問題