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

Question

我正在编写一个应用程序，它的一个测验，我有一个主窗口，我加载不同的UserControls（页）。所以我的问题是，我有一个形象的MainWindow，我想从Collapsed此图片Visible的Visibility从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 
} 

我的问题是...如何更改位于MainWindow的的Visibility与UserControl ...我试过制作一个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 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; 
    } 
}