从 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 路径。这是一个很好的入门教程In the Box – MVVM Training。

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

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;
    }
}