更改圖像在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; 
    } 
}