WPF扩展器单击事件上的展开/折叠网格列

Posted 2023-02-22

【中文标题】WPF扩展器单击事件上的展开/折叠网格列

【英文标题】：Expand/Collapse grid column on WPF expander click event

【发布时间】：2019-06-14 05:46:14

【问题描述】：

我有一个 MVVM 应用程序。在主窗口中，我在网格下方放置了 2 列。在第 2 列中，我放置了一个 WPF 扩展器，并将其设置为默认折叠 (IsExpanded="False")。当应用程序执行时，我希望网格列 1 填充网格和网格列 2 的整个宽度，宽度为 0（折叠）。因此，当我单击扩展器时，我希望网格列 2 扩展为 0.47* 的宽度。然后，如果我再次单击扩展器，我希望网格列 1 填充网格的整个宽度，并且网格列 2 被折叠（宽度 = 0）。我怎样才能做到这一点？下面的代码不起作用。

<Grid x:Name="Grid">
<Grid.RowDefinitions>            
    <RowDefinition Height="47.5*" />           
    <RowDefinition Height="auto" />            
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="0.47*" />
</Grid.ColumnDefinitions>

<controls:UCIndicationsOfUse Grid.Row="0" Grid.Column="0"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
                             Width="auto"
                             Height="auto"
                             DataContext="Binding" />

<controls:UCPData    Grid.Row="1" Grid.Column="0"
                     HorizontalAlignment="Stretch"
                     VerticalAlignment="Stretch"
                     Width="auto"
                     Height="auto"
                     DataContext="Binding" />

<Expander Grid.Row="0" 
          Grid.RowSpan="2"
          Grid.Column="1"  
          Width="25"            
          ExpandDirection="Left"
          IsExpanded="False"
          HorizontalAlignment="Right">
    <Expander.Header>
        <TextBlock Text="Settings">
            <TextBlock.LayoutTransform>
                <RotateTransform Angle="-90"/>
            </TextBlock.LayoutTransform>
        </TextBlock>
    </Expander.Header>
</Expander>

【参考方案1】：

最后我在展开器中添加了 Collapsed 和 Expanded 事件：

<Expander Grid.Row="0" 
          Grid.RowSpan="2"
          Grid.Column="1"  
          Width="25"
          Collapsed="Expander_Collapsed"
          Expanded="Expander_Expanded"            
          ExpandDirection="Left"
          IsExpanded="False"
          HorizontalAlignment="Right">
    <Expander.Header>
        <TextBlock Text="Settings">
            <TextBlock.LayoutTransform>
                <RotateTransform Angle="-90"/>
            </TextBlock.LayoutTransform>
        </TextBlock>
    </Expander.Header>
</Expander>

然后从代码隐藏视图：

private void Expander_Collapsed(object sender, RoutedEventArgs e)

    ColumnDefinition c = this.Grid.ColumnDefinitions[1];
    c.Width = new GridLength(0, GridUnitType.Auto);
    this.Grid.ColumnDefinitions.RemoveAt(1);
    this.Grid.ColumnDefinitions.Insert(1, c);


private void Expander_Expanded(object sender, RoutedEventArgs e)

    ColumnDefinition c = this.Grid.ColumnDefinitions[1];
    c.Width = new GridLength(0.47, GridUnitType.Star);
    this.Grid.ColumnDefinitions.RemoveAt(1);
    this.Grid.ColumnDefinitions.Insert(1, c);

我认为这不会破坏 MVVM 模式，因为它是视图的任务。

【讨论】：

如果您使用的是 mvvm 模式，为什么不将代码隐藏到您的视图模型中？我觉得这样更好。

@FranklinLee 好的，使用命令？是的，我想过，但我认为这是与视图相关的任务。