0

MainWindow には 3 つの UserControls があり、UserControl1 にはいくつかの名前の ListBox があります。アプリケーションを起動すると、UserControl2 と 3 は表示されません。

usercontrol1 のリストボックスで名前を選択すると、usercontrol2 がメインウィンドウに表示され、他の名前を選択すると、usercontrol3 がメインウィンドウに表示されます。

これは私の UserControlXaml コードです

<UserControl x:Class="Wpf_MVVM.UserControl1"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         x:Name="uc1" Height="Auto" Width="Auto">
<Grid>
    <ListBox Name="listbox" ItemsSource="{Binding mylist}"  HorizontalAlignment="Left" Height="310" VerticalAlignment="Top" Width="150" Margin="0,40,0,0" FontSize="15">

    </ListBox>
    <Label Content="Conversations" HorizontalAlignment="Left" VerticalAlignment="Top"  Height="40" Width="150" FontSize="20" Background="SkyBlue"/>
    <Button Content="Create New Chat" Height="30" HorizontalAlignment="Left" Margin="0,350,0,0" VerticalAlignment="Top" Width="150"/>

</Grid>
</UserControl>

これは私の.csコードです

public partial class UserControl1 : UserControl
{
    User1 User1 = new User1();
    public UserControl1()
    {
        InitializeComponent();
        this.DataContext = User1;
    }
}
public class User1
{
    private ObservableCollection<string> _mylist = new ObservableCollection<string>();

    public ObservableCollection<string> mylist { get { return _mylist; } }

    public User1()
    {
        mylist.Add("Name1");
        mylist.Add("Name2");
        mylist.Add("Name3");
        mylist.Add("Name4");

    }

これは私の mainwindow.xaml コードです

<Window x:Class="Wpf_MVVM.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Wpf_MVVM" 
    Title="MainWindow" Background="SlateGray" Height="420" Width="550" >
<Window.Resources>
    <BooleanToVisibilityConverter x:Key="VisibilityConverter" />
</Window.Resources>

<Grid>

    <local:UserControl1 x:Name="uc1"   HorizontalAlignment="Left" VerticalAlignment="Top"/>
    <StackPanel>

        <local:UserControl2 x:Name="uc2"  Visibility="{Binding SelectedItem, Converter={StaticResource VisibilityConverter}}"  HorizontalAlignment="Left" VerticalAlignment="Top" Margin="150,29,0,0" />
        <local:UserControl3 x:Name="uc3" Visibility="{Binding SelectedItem1, Converter={StaticResource VisibilityConverter}}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="340,29,0,0"/>


    </StackPanel>



</Grid>
</Window>

これは、usercontrol2 および 3 のビューモデル コードです。

  public class User : INotifyPropertyChanged
    {

        private bool _selectedItem;
        public bool SelectedItem
        {
            get { return _selectedItem; }
            set
            {
                _selectedItem = value;
                PropertyChanged(this, new PropertyChangedEventArgs("SelectedItem"));
            }
        }
        private bool _selectedItem1;
        public bool SelectedItem1
        {
            get { return _selectedItem1; }
            set
            {
                _selectedItem1 = value;
                PropertyChanged(this, new PropertyChangedEventArgs("SelectedItem1"));
            }
        }

        public class BooleanToVisibilityConverter : IValueConverter
        {
            public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
            {

                return value == null ? Visibility.Collapsed : Visibility.Visible;
            }

            public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
            {

                return null;
            }

        }
        public event PropertyChangedEventHandler PropertyChanged;
        private void Notify(string propertyName)
        {
            var handler = PropertyChanged;
            if (handler != null)
                handler(this, new PropertyChangedEventArgs(propertyName));
        }

        private readonly ObservableCollection<string> items = new ObservableCollection<string>();
        private string text;
        private readonly ObservableCollection<string> newitems = new ObservableCollection<string>();
        private string newtext;

        public class Command : ICommand
        {
            private readonly Action action;

            public Command(Action action)
            {
                this.action = action;
            }

            public bool CanExecute(object parameter)
            {
                return true;
            }


            public event EventHandler CanExecuteChanged;
            public void Execute(object parameter)
            {
                action();
            }
        }

        private readonly ICommand addCommand;
        private readonly ICommand sendCommand;
        public User()
        {

            addCommand = new Command(() => items.Add(Text));
            sendCommand = new Command(() => newitems.Add(NewText));
        }



        public IEnumerable<string> Items
        {
            get { return items; }
        }

        public IEnumerable<string> NewItems
        {
            get { return newitems; }
        }


        public ICommand AddCommand
        {
            get { return addCommand; }
        }
        public ICommand SendCommand
        {
            get { return sendCommand; }
        }

        public string Text
        {
            get { return text; }
            set
            {
                if (text == value)
                    return;

                text = value;
                Notify("Text");
            }
        }
        public string NewText
        {
            get { return newtext; }
            set
            {
                if (newtext == value)
                    return;

                newtext = value;
                Notify("NewText");
            }
        }
    }
}
4

2 に答える 2

1

を使用する場合は、ビュー モデルにBooleanToVisibilityConverterいくつかのプロパティを作成する必要があります。bool

public bool IsControl1Visible
{
    get { return isControl1Visible; }
    set { isControl1Visible = value; NotifyPropertyChanged("IsControl1Visible"); }
}

public bool IsControl2Visible
{
    get { return isControl2Visible; }
    set { isControl2Visible = value; NotifyPropertyChanged("IsControl2Visible"); }
}

SelectedItem次に、プロパティが必要になります。

public string SelectedItem
{
    get { return selectedItem; }
    set { selectedItem = value; NotifyPropertyChanged("SelectedItem"); }
}

SelectedItem DependencyPropertyまた、最初に を作成し、UserControlそれをプロパティにバインドする必要がありListBox.SelectedItemます ( を作成する方法を知っているか、作成する方法を見つけることができると仮定していますDependencyProperty)。

UserControl1

<ListBox Name="listbox" ItemsSource="{Binding mylist}" 
    SelectedItem="{Binding SelectedItem, RelativeSource={AncestorType={x:Type 
    local:UserControl1}}}" HorizontalAlignment="Left" Height="310" 
    VerticalAlignment="Top" Width="150" Margin="0,40,0,0" FontSize="15" />

次にBindUserControl1.SelectedItemプロパティ (プロパティに内部的にバインドされてListBox.SelectedItemいる) をビュー モデルに追加できます。

<local:UserControl1 x:Name="uc1" SelectedItem="{Binding SelectedItem}" 
    HorizontalAlignment="Left" VerticalAlignment="Top"/>

最後に、ビュー モデル プロパティを更新して、他の s のSelectedItem可視性を変更できます。Usercontrol

public string SelectedItem
{
    get { return selectedItem; }
    set 
    {
        selectedItem = value;
        NotifyPropertyChanged("SelectedItem");
        if (selectedItem == "Some value") 
        {
            IsControl1Visible = true;
            IsControl2Visible = false;
        }
        else
        {
            IsControl2Visible = true;
            IsControl1Visible = false;
        }
    }
}

この方法の代わりに、 WPF MVVM ナビゲート ビューの投稿に対する私の回答が役に立つかもしれません。

于 2013-10-31T10:49:22.473 に答える
0

追加の C# コードなしで Binding の機能を使用できます

<Grid>
  <local:UserControl1 x:Name="uc1"   HorizontalAlignment="Left" VerticalAlignment="Top"/>
    <StackPanel>
      <local:UserControl2 x:Name="uc2" Visibility="{Binding ElementName=uc1, Path=SelectedItem, Converter={StaticResource VisibilityConverter}}"  HorizontalAlignment="Left" VerticalAlignment="Top" Margin="150,29,0,0" />
      <local:UserControl3 x:Name="uc3" Visibility="{Binding ElementName=uc2, Path=SelectedItem, Converter={StaticResource VisibilityConverter}}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="340,29,0,0"/>
    </StackPanel>
</Grid>

またはデータ トリガーを使用する場合:

<Style TargetType="{x:Type Control}" x:Key="VisibilityStyle1">
            <Setter Property="Visibility" Value="Visible" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding SelectedItem, ElementName=uc1}" Value="{x:Null}">
                    <Setter Property="Visibility" Value="Hidden" />
                </DataTrigger>
            </Style.Triggers>
</Style>

<Style TargetType="{x:Type Control}" x:Key="VisibilityStyle2">
            <Setter Property="Visibility" Value="Visible" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding SelectedItem, ElementName=uc2}" Value="{x:Null}">
                    <Setter Property="Visibility" Value="Hidden" />
                </DataTrigger>
            </Style.Triggers>
</Style>

<Grid>
  <local:UserControl1 x:Name="uc1"   HorizontalAlignment="Left" VerticalAlignment="Top"/>
    <StackPanel>
      <local:UserControl2 x:Name="uc2" Style="{DynamicResource VisibilityStyle1}"  HorizontalAlignment="Left" VerticalAlignment="Top" Margin="150,29,0,0" />
      <local:UserControl3 x:Name="uc3" tyle="{DynamicResource VisibilityStyle2}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="340,29,0,0"/>
    </StackPanel>
</Grid>
于 2013-10-31T11:06:05.630 に答える