WPFのキャンバスにユーザーコントロールを追加/削除する

Question

複数のテキストボックス、コンボボックス、およびボタンを持つ2つのWPFユーザーコントロールを作成しました。メインのwpfウィンドウでは、キャンバスとその中に2つのリスト項目を持つリストボックスを作成しました。私の要件は、最初のリストボックス項目を選択した場合、最初のユーザーコントロールがキャンバスに追加されるはずです。 2番目のリストボックス項目を選択すると、以前に追加されたユーザーコントロールが非表示になり、2番目のリストボックス項目が追加/表示されます。誰でもこのコードのサンプルを提供できますか？

以下は私が書いたコードです。私は2つのユーザーコントロールを作成しました。

UserControl1.xaml

<UserControl x:Class="UserControl1" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="210" Height="210" x:Name="UCntl1"> 
    <Grid> 
     <StackPanel> 
     <GroupBox Header="Text Boxes"> 
      <StackPanel Orientation="Horizontal"> 
       <StackPanel> 
        <Label Margin="4" Height="21">TextBox1</Label> 
        <Label Margin="4" Height="21">TextBox2</Label> 
        <Label Margin="4" Height="21">TextBox3</Label> 
       </StackPanel> 
       <StackPanel> 
        <TextBox Width="100" Height="21" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="4">0.1</TextBox> 
        <TextBox Width="100" Height="21" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="4">0.2</TextBox> 
        <TextBox Width="100" Height="21" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="4">0.3</TextBox> 
       </StackPanel> 
      </StackPanel> 
     </GroupBox> 
      <GroupBox Header="Conbo Boxes"> 
       <StackPanel Orientation="Horizontal"> 
        <StackPanel> 
         <Label Margin="4" Height="21">ComboBox1</Label> 
         <Label Margin="4" Height="21">ComboBox2</Label> 
         <Label Margin="4" Height="21">ComboBox3</Label> 
        </StackPanel> 
        <StackPanel> 
         <ComboBox Width="100" Height="21" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="4"> 
          <ComboBoxItem>Item AAA</ComboBoxItem> 
         </ComboBox> 
         <ComboBox Width="100" Height="21" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="4"> 
          <ComboBoxItem>Item BBB</ComboBoxItem> 
         </ComboBox> 
         <ComboBox Width="100" Height="21" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="4"> 
          <ComboBoxItem>Item CCC</ComboBoxItem> 
         </ComboBox> 
        </StackPanel> 
       </StackPanel> 
      </GroupBox> 
     </StackPanel> 
    </Grid> 
</UserControl> 

UserControl2.xaml

<UserControl x:Class="UserControl2" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="210" Height="210" x:Name="UCntl2"> 
<Grid> 
    <StackPanel> 
     <GroupBox Header="Conbo Boxes"> 
      <StackPanel Orientation="Horizontal"> 
       <StackPanel> 
        <Label Margin="4" Height="21">ComboBox1</Label> 
        <Label Margin="4" Height="21">ComboBox2</Label> 
        <Label Margin="4" Height="21">ComboBox3</Label> 
       </StackPanel> 
       <StackPanel> 
        <ComboBox Width="100" Height="21" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="4"></ComboBox> 
        <ComboBox Width="100" Height="21" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="4"></ComboBox> 
        <ComboBox Width="100" Height="21" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="4"></ComboBox> 
       </StackPanel> 
      </StackPanel> 
     </GroupBox> 
     <GroupBox Header="Text Boxes"> 
      <StackPanel Orientation="Horizontal"> 
       <StackPanel> 
        <Label Margin="4" Height="21">TextBox1</Label> 
        <Label Margin="4" Height="21">TextBox2</Label> 
        <Label Margin="4" Height="21">TextBox3</Label> 
       </StackPanel> 
       <StackPanel> 
        <TextBox Width="100" Height="21" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="4"></TextBox> 
        <TextBox Width="100" Height="21" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="4"></TextBox> 
        <TextBox Width="100" Height="21" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="4"></TextBox> 
       </StackPanel> 
      </StackPanel> 
     </GroupBox> 
    </StackPanel> 
</Grid> 

Window1.xaml

<Window x:Class="Window1" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
Title="Window1" Height="Auto" Width="Auto"> 
<Grid> 
    <StackPanel Orientation="Horizontal"> 
     <Grid Margin="0,0,0,0" Width="Auto" Height="Auto" VerticalAlignment="Top"> 
      <ListBox Margin="0,0,0,0" HorizontalAlignment="Left" Width="Auto" Height="Auto" VerticalAlignment="Top" BorderBrush="White"> 
       <ListBoxItem Name="LstItem1" Selected="LstItem1_Selected">User Control 1</ListBoxItem> 
       <ListBoxItem Name="LstItem2" Selected="LstItem2_Selected">User Control 2</ListBoxItem> 
      </ListBox> 
     </Grid> 
     <Grid Width="10" Background="LightGray"></Grid> 
     <Grid Margin="0,0,0,0"> 
      <Canvas Name="Canvas1" Width="210" Height="210" VerticalAlignment="Top"> 

      </Canvas> 
     </Grid> 

    </StackPanel> 
</Grid> 

Widow1.xaml.vb

Class Window1 

Private Sub LstItem1_Selected(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) 
    Canvas1.Children.Clear() 
    Canvas1.Children.Add(New UserControl1) 
End Sub 

Private Sub LstItem2_Selected(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) 
    Canvas1.Children.Clear() 
    Canvas1.Children.Add(New UserControl2) 
End Sub 

エンドクラス

問題

私はキャンバスの前のコントロールを削除した後、ユーザーコントロールを追加しました。このため、UserControlsのリストボックス内の選択された値は、コントロールをキャンバスに再度追加している間にクリアされています。キャンバスからコントロールを削除する代わりに、キャンバス上でユーザーコントロールを非表示にする方法はありますか？

Answer 1

これはあなたを始めてくれるはずです。実際のプロジェクトでどうやってやっているかは正確には分かりませんが、十分に近いです。このサイトの回答にプロジェクトを簡単に結びつけたいと思っています。

は、最終的な結果は次のようになります。

App.xaml：

<Application x:Class="SO9735486.App" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      xmlns:vm="clr-namespace:SO9735486.ViewModels" 
      xmlns:v="clr-namespace:SO9735486.Views" 
      StartupUri="MainWindow.xaml"> 
    <Application.Resources> 
     <DataTemplate DataType="{x:Type vm:MainViewModel}"> 
      <v:MainView/> 
     </DataTemplate> 
     <DataTemplate DataType="{x:Type vm:FirstContentViewModel}"> 
      <v:FirstContentView/> 
     </DataTemplate> 
     <DataTemplate DataType="{x:Type vm:SecondContentViewModel}"> 
      <v:SecondContentView/> 
     </DataTemplate> 
    </Application.Resources> 
</Application> 

MainWindow.xaml：

<Window x:Class="SO9735486.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow"> 
</Window> 

MainWindow.xaml.cs：

namespace SO9735486 
{ 
    using System.Windows; 
    using SO9735486.ViewModels; 

    public partial class MainWindow : Window 
    { 
     public MainWindow() 
     { 
      InitializeComponent(); 

      this.Content = new MainViewModel(); 
     } 
    } 
} 

ViewModel.cs：

namespace SO9735486.ViewModels 
{ 
    using System; 
    using System.ComponentModel; 
    using System.Windows; 
    using System.Windows.Threading; 

    // http://kentb.blogspot.com/2009/04/mvvm-infrastructure-viewmodel.html 
    public abstract class ViewModel : INotifyPropertyChanged 
    { 
     private readonly Dispatcher _dispatcher; 

     protected ViewModel() 
     { 
      if (Application.Current != null) 
      { 
       _dispatcher = Application.Current.Dispatcher; 
      } 
      else 
      { 
       //this is useful for unit tests where there is no application running 
       _dispatcher = Dispatcher.CurrentDispatcher; 
      } 

     } 

     [field: NonSerialized] 
     public event PropertyChangedEventHandler PropertyChanged; 

     protected Dispatcher Dispatcher 
     { 
      get { return _dispatcher; } 
     } 

     protected virtual void OnPropertyChanged(PropertyChangedEventArgs e) 
     { 
      var handler = this.PropertyChanged; 

      if (handler != null) 
      { 
       handler(this, e); 
      } 
     } 

     protected void OnPropertyChanged(string propertyName) 
     { 
      OnPropertyChanged(new PropertyChangedEventArgs(propertyName)); 
     } 
    } 
} 

ContentViewModel。CS：

namespace SO9735486.ViewModels 
{ 
    public abstract class ContentViewModel : ViewModel 
    { 
     private readonly string displayName; 

     protected ContentViewModel(string displayName) 
     { 
      this.displayName = displayName; 
     } 

     public string DisplayName 
     { 
      get { return this.displayName; } 
     } 
    } 
} 

FirstContentViewModel.cs：

namespace SO9735486.ViewModels 
{ 
    public sealed class FirstContentViewModel : ContentViewModel 
    { 
     private string name; 

     public FirstContentViewModel() 
      : base("First") 
     { 
     } 

     public string Name 
     { 
      get { return this.name; } 
      set 
      { 
       if (this.name != value) 
       { 
        this.name = value; 
        this.OnPropertyChanged("Name"); 
       } 
      } 
     } 
    } 
} 

SecondContentViewModel.cs：

namespace SO9735486.ViewModels 
{ 
    public sealed class SecondContentViewModel : ContentViewModel 
    { 
     public SecondContentViewModel() 
      : base("Second") 
     { 
     } 
    } 
} 

MainViewModel.cs：

namespace SO9735486.ViewModels 
{ 
    using System.Collections.Generic; 
    using System.Linq; 

    public sealed class MainViewModel : ViewModel 
    { 
     private readonly ICollection<ContentViewModel> contentViewModels; 
     private ContentViewModel selectedContentViewModel; 

     public MainViewModel() 
     { 
      this.contentViewModels = new List<ContentViewModel> 
      { 
       new FirstContentViewModel(), 
       new SecondContentViewModel() 
      }; 

      this.selectedContentViewModel = this.contentViewModels.First(); 
     } 

     public ICollection<ContentViewModel> ContentViewModels 
     { 
      get { return this.contentViewModels; } 
     } 

     public ContentViewModel SelectedContentViewModel 
     { 
      get { return this.selectedContentViewModel; } 
      set 
      { 
       if (this.selectedContentViewModel != value) 
       { 
        this.selectedContentViewModel = value; 
        this.OnPropertyChanged("SelectedContentViewModel"); 
       } 
      } 
     } 
    } 
} 

FirstContentView.xaml：

<UserControl x:Class="SO9735486.Views.FirstContentView" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
    <StackPanel> 
     <Label>First Content View</Label> 
     <TextBox Text="{Binding Name}"/> 
    </StackPanel> 
</UserControl> 

SecondContentView.xaml：

<UserControl x:Class="SO9735486.Views.SecondContentView" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
    <StackPanel> 
     <Label>Second content view</Label> 
     <Rectangle Fill="Blue" Width="100" Height="30"/> 
    </StackPanel> 
</UserControl> 

MainView.xaml：

<UserControl x:Class="SO9735486.Views.MainView" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
    <DockPanel> 
     <ComboBox DockPanel.Dock="Top" ItemsSource="{Binding ContentViewModels}" SelectedItem="{Binding SelectedContentViewModel}" DisplayMemberPath="DisplayName"/> 
     <ContentControl Content="{Binding SelectedContentViewModel}"/> 
    </DockPanel> 
</UserControl> 

Answer 2

変更はWindows1.xaml.vbに対してのみ行われます。コードbhindファイルは次のようにする必要があります。問題の答えは、Canvas1.Clear（）を呼び出す代わりに、追加されたユーザーコントロールの可視性をWindows.Visibility.Collapsedに設定します。

Window1.xaml.vb

Class Window1 
Private U1 As Integer 
Private U2 As Integer 
Private Sub LstItem1_Selected(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) 
    Canvas1.Children.Item(U1).Visibility = Windows.Visibility.Visible 
    Canvas1.Children.Item(U2).Visibility = Windows.Visibility.Collapsed 
End Sub 

Private Sub LstItem2_Selected(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) 
    Canvas1.Children.Item(U2).Visibility = Windows.Visibility.Visible 
    Canvas1.Children.Item(U1).Visibility = Windows.Visibility.Collapsed 
End Sub 

Private Sub Window1_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded 
    U1 = Canvas1.Children.Add(New UserControl1) 
    U2 = Canvas1.Children.Add(New UserControl2) 

    Canvas1.Children.Item(U1).Visibility = Windows.Visibility.Collapsed 
    Canvas1.Children.Item(U2).Visibility = Windows.Visibility.Collapsed 
End Sub 
End Class