ViewModelからUserControlの追加

Question

前提・実現したいこと

ViewModelからViewのGridにUserControlを追加する方法を教えていただきたいです。

・やりたい事
ボタン操作などをきっかけに、作成したUserControl画面をGridに表示させたい

コードビハインドでは下記ソースのように作成したのですが、ViewModelからの手段が分かりません。

よろしくお願いします。

該当のソースコード

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Button Grid.Column="0"
            Margin="10"/>
    <Grid x:Name="grid" Grid.Row="1">
        ：    
    </Grid>
</Grid>

public void Btn_Click(object sender, EventArgs e)
{
   grid.Children.Clear();
   grid.Children.Add(new UserControl());
}

補足情報（FW/ツールのバージョンなど）

Livet v3.2.1

Comments

[hihijiji]

MVVM の目的の一つが、ViewModelにてUserControlなどのViewの部品を扱わなくすることです。
コードビハインドにコードが少なくなるのはMVVMを適用したときの結果です。
ご提示のコードの範囲ではMVVMとしておかしなところはありません。

Answer 1

GridにUserControlを追加する方法

Gridなのは何か理由がありますか？
Gridは単に追加していくと重なってしまいますし、MVVMでRow・Column指定するのは割と面倒です。

提示C#コードではClearしてAddと常に一個しか入らないわけですが、毎回newすることが重要なんでしょうか？

やりたいこと自体はわかりますが、もう少し具体的な例でないと何とも言えません。

とりあえずありえそうなものを３パターン作ってみました（前２つはViewModelは関係ないし追加もしていませんが^^;

<Window
  x:Class="Questions352544.Views.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:behaviors="http://schemas.microsoft.com/xaml/behaviors"
  xmlns:v="clr-namespace:Questions352544.Views"
  xmlns:vm="clr-namespace:Questions352544.ViewModels"
  Width="600"
  Height="350">
  <Window.Resources>
    <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
  </Window.Resources>

  <Window.DataContext>
    <vm:MainWindowViewModel />
  </Window.DataContext>

  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition />
      <ColumnDefinition />
      <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <GroupBox Header="一回限り出現">
      <DockPanel>
        <Button Content="Show" DockPanel.Dock="Top">
          <behaviors:Interaction.Triggers>
            <behaviors:EventTrigger EventName="Click">
              <behaviors:ChangePropertyAction
                PropertyName="Visibility"
                TargetName="userControl1"
                Value="Visible" />
            </behaviors:EventTrigger>
          </behaviors:Interaction.Triggers>
        </Button>
        <Grid>
          <v:UserControl1
            x:Name="userControl1"
            DataContext="only one"
            Visibility="Hidden" />
        </Grid>
      </DockPanel>
    </GroupBox>

    <GroupBox Grid.Column="1" Header="出したり消したり">
      <DockPanel>
        <ToggleButton
          x:Name="toggleButton"
          Content="Show&amp;Hide"
          DockPanel.Dock="Top" />
        <Grid>
          <v:UserControl1 DataContext="only one" Visibility="{Binding IsChecked, Converter={StaticResource BooleanToVisibilityConverter}, ElementName=toggleButton}" />
        </Grid>
      </DockPanel>
    </GroupBox>

    <GroupBox Grid.Column="2" Header="どんどん追加">
      <DockPanel>
        <Button
          Command="{Binding AddCommand}"
          Content="Add"
          DockPanel.Dock="Top" />
        <ItemsControl ItemsSource="{Binding Items}">
          <ItemsControl.ItemTemplate>
            <DataTemplate>
              <v:UserControl1 />
            </DataTemplate>
          </ItemsControl.ItemTemplate>
        </ItemsControl>
      </DockPanel>
    </GroupBox>
  </Grid>
</Window>

<UserControl
  x:Class="Questions352544.Views.UserControl1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Grid>
    <TextBlock Text="{Binding ., StringFormat=UserControl1 - {0}}" />
  </Grid>
</UserControl>

using Livet;
using Livet.Commands;
using System.Collections.ObjectModel;

namespace Questions352544.ViewModels
{
    public class MainWindowViewModel : ViewModel
    {
        public ViewModelCommand AddCommand { get; }
        public ObservableCollection<int> Items { get; } = new ObservableCollection<int>();

        private int count;

        public MainWindowViewModel()
        {
            AddCommand = new ViewModelCommand(() => Items.Add(++count));
        }
    }
}

ObservableCollection<int>と、intになっている深い意味はありません。
ObservableCollection<UserControl1ViewModel>となることのほうが普通かもしれませんが、ケースバイケースです。

Comments

[退会済みユーザー]

Gridである必要はありません。
実現したいことは、ツールバーにあるボタンによって、画面を切り替えて表示させることです。

出したり消えたりを参考に、各UserControl画面のVisibilityをBindingするようにして、ボタンが押されたときにきにVisibilityを切り替えるようにしました。

ありがとうございます。