基于MVVM的组合框选择的WPF更改窗口布局 [英] WPF Change Window Layout Based on Combo Box Selection Using MVVM

问题描述

我需要根据用户在组合框中选择的内容来更改窗口的布局。我曾尝试过一种可能的方法，但感觉它笨拙并被黑客入侵。我确定他们一定是更干净的MVVM解决方案。

I need to change the layout of my window based on what the user selects in a combo box. I've made a stab at what one way might be but feel like it is clunky and hacked together. Im certain their must be a cleaner MVVM solution.

我的想法是在GroupBox中具有多个停靠面板的位置，其可见性设置为崩溃。做出选择后，相应的底座面板将设置为可见。我试图找到一种在视图模型内执行此操作的方法，但没有成功。我也忍不住想起我的尝试违反了MVVM。

My thoughts where to have multiple dock panels in my GroupBox Whose visibility is set to collapse. When the selection is made, the appropriate dockpanel will be set to visible. I attempted to find a way to do this inside the view model with no success. I also couldn't help but think my attempts are violating MVVM.

XAML

<GroupBox Header="Options">
    <Grid>
        <DockPanel LastChildFill="False" x:Name="syncWellHeadersDockPanel" Visibility="Collapsed">
            <Button DockPanel.Dock="Right" Content="Test"></Button>
        </DockPanel>
        <DockPanel LastChildFill="False" x:Name="SyncDirectionalSurveyDockPanel" Visibility="Collapsed">
            <Button DockPanel.Dock="Left" Content="Test02"></Button>
        </DockPanel>

    </Grid>
</GroupBox>

ViewModel-组合框所选项目的属性

private StoredActionsModel _selectedStoredAction = DefaultStoredAction.ToList<StoredActionsModel>()[0];
        public StoredActionsModel SelectedStoredAction
        {
            get { return _selectedStoredAction; }
            set
            {
                if (value != _selectedStoredAction)
                {
                    //  Unset Selected on old value, if there was one
                    if (_selectedStoredAction != null)
                    {
                        _selectedStoredAction.Selected = false;
                    }
                    _selectedStoredAction = value;
                    //  Set Selected on new value, if there is one
                    if (_selectedStoredAction != null)
                    {
                        _selectedStoredAction.Selected = true;
                    }
                    OnPropertyChanged("SelectedStoredAction");

                    if (_selectedStoredAction.StoredActionID == 4)
                    {
                        //X:SyncWellHeaderDockPanel.visibility = true?????
                    }
                }
            }
        }

推荐答案

这是一种纯粹的XAML方法，可以完全按照您的要求进行操作。

Here's a pure-XAML way to do exactly what you're asking how to do. It's a bit verbose.

请注意，我们不再在的属性中设置 Visibility DockPanel s。如果我们仍然这样做，则 Style 触发器中设置的值将被属性覆盖。这就是依赖属性的工作方式。

Notice that we no longer set Visibility in attributes on the DockPanels. If we still did that, the values set in the Style trigger would be overridden by the attributes. That's the way dependency properties work.

<GroupBox Header="Options">
    <Grid>
        <DockPanel LastChildFill="False" x:Name="syncWellHeadersDockPanel" >
            <Button DockPanel.Dock="Right" Content="Test"></Button>
            <DockPanel.Style>
                <Style TargetType="DockPanel" >
                    <Setter Property="Visibility" Value="Collapsed" />
                    <Style.Triggers>
                        <DataTrigger 
                            Binding="{Binding SelectedStoredAction.StoredActionID}" 
                            Value="1"
                            >
                            <Setter Property="Visibility" Value="Visible" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </DockPanel.Style>
        </DockPanel>
        <DockPanel LastChildFill="False" x:Name="SyncDirectionalSurveyDockPanel">
            <Button DockPanel.Dock="Left" Content="Test02"></Button>
            <DockPanel.Style>
                <Style TargetType="DockPanel" >
                    <Setter Property="Visibility" Value="Collapsed" />
                    <Style.Triggers>
                        <DataTrigger 
                            Binding="{Binding SelectedStoredAction.StoredActionID}" 
                            Value="2"
                            >
                            <Setter Property="Visibility" Value="Visible" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </DockPanel.Style>
        </DockPanel>
    </Grid>
</GroupBox>

另一种方法是传递 SelectedStoredAction.StoredActionID 到 DataTemplateSelector ，但这涉及编写C＃代码，该代码知道您的XAML资源键是什么，而且我也不是粉丝。

Another way to do this would be to pass SelectedStoredAction.StoredActionID to a DataTemplateSelector, but that involves writing C# code that knows what your XAML resource keys are, and I'm not a fan.

这篇关于基于MVVM的组合框选择的WPF更改窗口布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！