通过C＃WPF上的用户控件更改图像可见性

Question

我正在编写一个应用程序，它是一个测验，我有一个主窗口，在其中加载了不同的UserControls （页面）。 所以我的问题是，我有一个图像MainWindow ，我想改变Visibility此图像从Collapsed到Visible从一个UserControls ，但没有运气...

这是我的MainWindow ：

<Window x:Class="MuseonQuiz_v3.PageSwitcher"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:pages="clr-namespace:MuseonQuiz_v3.Pages"
    xmlns:k="http://schemas.microsoft.com/kinect/2013"
    Title="MainWindow" Height="710" Width="1127" IsEnabled="True" DataContext="{Binding}" FontFamily="KaiTi" ResizeMode="NoResize" WindowStyle="None"
     WindowStartupLocation="CenterScreen" WindowState="Maximized">


<Grid>         
    <Grid>            
        <k:KinectRegion Name="kinectRegion">
            <ContentControl x:Name="mainContentControl"/>
        </k:KinectRegion>
    </Grid>
    <Grid>
        <Grid.Resources>
            <BooleanToVisibilityConverter x:Key="BoolToVisConverter" />
        </Grid.Resources>

        <k:KinectSensorChooserUI HorizontalAlignment="Center" VerticalAlignment="Top" Name="sensorChooserUi" />
        <k:KinectUserViewer VerticalAlignment="Bottom" HorizontalAlignment="Center" k:KinectRegion.KinectRegion="{Binding ElementName=kinectRegion}" Height="600" Width="600" />
        <Image Name="colorStreamImage" Width="640" Height="480" Visibility="Collapsed" HorizontalAlignment="Center" />
    </Grid>
</Grid>

这是我的UserControl ：

public partial class Selectie : UserControl, ISwitchable
{
    string backgroundSelectie = "pack://application:,,,/MuseonQuiz_v3;component/Images/Selectie/selectie_background.jpg";

    public Selectie()
    {
        InitializeComponent();
        selectieBackground();
        animatieButtons();
    }

    #region ISwitchable Members
    public void UtilizeState(object state)
    {
        throw new NotImplementedException();
    }

    #endregion
}

我的问题是...如何从UserControl更改位于MainWindow中的colorStreamImage的Visibility ...我尝试制作MainWindow的实例，但这不起作用，也许我必须使用一些绑定，但我不确定，感谢您能提供的任何帮助！

Answer 1

正如Clemens所言，最好的选择是沿着MVVM的道路前进。 这是一个很好的入门教程-MVVM培训 。

首先，您可以创建一个实现INotifyPropertyChanged的视图模型。 在这种情况下，您可能希望它具有至少一个Visibility类型的属性。

public class MainViewModel : INotifyPropertyChanged
{
    private Visibility _imageVisibility;
    public Visibility ImageVisibility
    {
        get { return _imageVisibility; }
        set { _imageVisibility = value; OnPropertyChanged("ImageVisibility"); }
    }

    private BitmapImage _imageSource;
    public BitmapImage ImageSource{...}

    #region INotifyPropertyChanged Members
    public event PropertyChangedEventHandler PropertyChanged;
    #endregion

    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler eventHandler = PropertyChanged;
        if (eventHandler != null)
            eventHandler(this, new PropertyChangedEventArgs(propertyName));
    }
}

现在，您需要将此视图模型设置为主窗口上的数据上下文。 为此，Paul Stovell在不同的方法上有不错的文章： http ://paulstovell.com/blog/mvvm-instantiation-approaches。 一旦在主窗口上将其设置，Selectie元素将继承数据上下文。 使用最简单的方法：

public MainWindow()
{
    InitializeComponent();

    this.DataContext = new MainViewModel();
}

然后，您的Image元素可能会像这样绑定到属性：

<Image Visibility="{Binding ImageVisibility, UpdateSourceTrigger=PropertyChanged}" Source="{Binding ImageSource}" Height="200" Width="200"></Image>

Selectie元素现在可以更改视图模型上的ImageVisbility属性，因为它与MainWindow共享相同的数据上下文。 （我使用了后面的代码作为示例。您可能希望将尽可能多的逻辑从视图中推入视图模型或进一步推向下游）

public partial class Selectie : UserControl
{
    public Selectie()
    {
        InitializeComponent();
    }
    private void Selectie_MouseDoubleClick(object sender, MouseButtonEventArgs e)
    {
        if (((MainViewModel)this.DataContext).ImageVisibility == System.Windows.Visibility.Visible)
            ((MainViewModel)this.DataContext).ImageVisibility = System.Windows.Visibility.Collapsed;
        else
            ((MainViewModel)this.DataContext).ImageVisibility = System.Windows.Visibility.Visible;
    }
}