基於MVVM的組合框選擇的WPF更改窗口布局

Question

我需要根據用戶在組合框中選擇的內容來更改窗口的布局。 我已經嘗試了一種可能的方法，但感覺它笨拙並且被黑了。 我確定他們一定是更干凈的MVVM解決方案。

我的想法是在GroupBox中的多個停靠面板所在的位置，其可見性設置為崩潰。 做出選擇后，適當的底座面板將設置為可見。 我試圖找到一種在視圖模型內執行此操作的方法，但沒有成功。 我也忍不住認為自己的嘗試違反了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-ComboBox的選定項目的屬性

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?????
                    }
                }
            }
        }

Answer 1

這是一種純XAML方式，可以完全按照您的要求進行操作。 有點冗長。

注意，我們不再在DockPanel的屬性中設置Visibility 。 如果我們仍然這樣做，則Style觸發器中設置的值將被屬性覆蓋。 這就是依賴屬性工作的方式。

<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資源鍵是什么，而我不是粉絲。