WPF和MVVM指示燈-在UserControl中動態顯示UserControl

Question

我正在使用WPF和MVVM Light框架。 在我的項目中，我有一個GameViewModel和一個與其關聯的視圖，該視圖充當游戲的主屏幕（這不是我的主ViewModel）。 在GameView中，我想在網格內的某個位置動態顯示由按鈕單擊或類似性質觸發的其他UserControl。 我不完全確定該怎么做。 我曾考慮過使用輔助ViewModelLocator或類似的工具（我根本不知道該怎么做），但是在深入探討之前，我想我想問一下這里是否有其他實用方法做這個。

假設單擊一個按鈕，UserControl1顯示在網格的3、3處，然后單擊另一個按鈕，並且UserControl2顯示在同一位置。 這實質上是我要完成的工作。 盡管不是必須的，但我想使用盡可能多的XAML和盡可能少的代碼隱藏，但是以MVVM友好的方式完成工作的任何事情對我來說都是很好的選擇。 您可以提供的任何建議將不勝感激。 我猜想解決方案可能比我提出來的要容易得多……通常是這樣。

Answer 1

我在最近的項目中使用的一個想法是將元素的Visibility屬性綁定到ViewModel中的Visibility屬性。 然后，您可以處理ViewModel中的所有顯示邏輯。

Visibility="{Binding ElementVisibility}"

然后在ViewModel中，您將擁有一個類似

public const string ElementVisibilityPropertyname = "ElementVisibility";
private Visibility _elementVisibility = Visibility.Collapsed;
public Visibility ElementVisibility
{
    get
    {
        return _elementVisibility;
    }
    set
    {
        if (_elementVisibility== value)
        {
            return;
        }

        RaisePropertyChanging(ElementVisibilityPropertyname );
        _elementVisibility= value;
        RaisePropertyChanged(ElementVisibilityPropertyname );
    }
}

在您的Button中，您將像這樣綁定Command屬性：

Command="{Binding ShowElement}"

然后在ViewModel中，您將提供一個RelayCommand

private RelayCommand _showElement;
public RelayCommand ShowElement
{
    get
    {
        return _showElement?? (_showElement= new RelayCommand(() =>
                             {
                                 this.ElementVisibility = Visibility.Visible;
                             ));
    }
}

希望這能使您找到想要的方向！

Answer 2

我在這里寫了一篇關於類似的文章。

http://pjgcreations.blogspot.co.uk/2013/03/wpf-programmatically-adding-buttons.html

下面使用Canvas，ItemPresenter和DataTemplate來顯示在運行時從ViewModel填充的按鈕。

XAML：

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
    <Canvas x:Name="MyCanvas">
        <ItemsControl ItemsSource="{Binding MyButtons}" Height="237" Width="507">
            <ItemsControl.ItemsPanel >
                <ItemsPanelTemplate>
                    <Canvas IsItemsHost="true"></Canvas>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Button Margin="{Binding ControlMargin}" Content="{Binding Content}" Command="{Binding DataContext.ButtonCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}" CommandParameter="{Binding ProductId}"></Button>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Canvas>
</Window>

流體按鈕類；

Public Class FluidButton

    Public Property Content As String
    Public Property LeftPos As Double
    Public Property TopPos As Double
    Public Property ProductId As Double

    'Returns the Control Margin, using the Class Properties
    Public ReadOnly Property ControlMargin As Thickness
        Get
            Return New Thickness With {.Left = LeftPos, .Top = TopPos}
        End Get
    End Property

End Class

ViewModel中的屬性；

'Our Collection of Buttons or Products
Public Property MyButtons As ObservableCollection(Of FluidButton)

'Used to expose the Button Pressed Execute Commands to the UI for Binding
Public Property ButtonCommand As DelegateCommand

添加一些按鈕；

MyButtons = New ObservableCollection(Of FluidButton)

MyButtons.Add(New FluidButton With {.Content = "Test1", .LeftPos = 0, .TopPos = 20, .ProductId = 1})
MyButtons.Add(New FluidButton With {.Content = "Test2", .LeftPos = 40, .TopPos = 30, .ProductId = 2})
MyButtons.Add(New FluidButton With {.Content = "Test3", .LeftPos = 80, .TopPos = 40, .ProductId = 3})
MyButtons.Add(New FluidButton With {.Content = "Test4", .LeftPos = 120, .TopPos = 50, .ProductId = 4})
MyButtons.Add(New FluidButton With {.Content = "Test5", .LeftPos = 160, .TopPos = 60, .ProductId = 5})

我相信您可以輕松修改此設置以滿足您的需求