title: Change stack panel visibility using Model view Approach
body: <p>I want to change the visibility of a stack panel using the view model approach in my WP app , i am having problem , here is my code (sample).</p>
  
  <p><strong>Xaml Page:</strong></p>
  
  <pre><code>&lt;phone:PhoneApplicationPage 
  x:Class="NextUKWindowsPhone.test"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  xmlns:localHelpers="clr-namespace:NextUKWindowsPhone.Helpers"
  xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  FontFamily="{StaticResource PhoneFontFamilyNormal}"
  FontSize="{StaticResource PhoneFontSizeNormal}"
  Foreground="{StaticResource PhoneForegroundBrush}"
  SupportedOrientations="Portrait" Orientation="Portrait"
  mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
  shell:SystemTray.IsVisible="True"&gt;
  &lt;phone:PhoneApplicationPage.Resources&gt;
      &lt;localHelpers:BooleanToVisibilityConverter x:Key="MyBooleanToVisibilityConverter" /&gt;
  &lt;/phone:PhoneApplicationPage.Resources&gt;
  &lt;!--LayoutRoot is the root grid where all page content is placed--&gt;
  &lt;Grid x:Name="LayoutRoot" Background="Transparent"&gt;
      &lt;Grid.RowDefinitions&gt;
          &lt;RowDefinition Height="Auto"/&gt;
          &lt;RowDefinition Height="*"/&gt;
      &lt;/Grid.RowDefinitions&gt;
  
      &lt;!--TitlePanel contains the name of the application and page title--&gt;
  
      &lt;StackPanel&gt;
  
  
      &lt;/StackPanel&gt;
      &lt;!--ContentPanel - place additional content here--&gt;
      &lt;Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"&gt;
          &lt;StackPanel&gt;
              &lt;StackPanel  Name="prgrs"  Visibility="{Binding isVisible, Converter={StaticResource MyBooleanToVisibilityConverter}}" &gt;
              &lt;TextBlock Height="30" Name="textBlock1" Text="Hello...! show/hide me" /&gt;
          &lt;/StackPanel&gt;
          &lt;StackPanel&gt;
              &lt;Button Content="Hide" Height="72" Name="button2" Width="160" /&gt;
              &lt;Button Content="Show" Height="72" Name="button1" Width="160" /&gt;
              &lt;/StackPanel&gt;
          &lt;/StackPanel&gt;
      &lt;/Grid&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>Code Behind:</strong></p>
  
  <pre><code>  public partial class test : PhoneApplicationPage
  {
      public test()
      {
          InitializeComponent();
          DataContext = App.TviewModel;
      }
  }
  </code></pre>
  
  <p><strong>Converter Class:</strong></p>
  
  <pre><code> public  class BooleanToVisibilityConverter : IValueConverter
  {
      public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
      {
          var flag = false;
          if (value is bool)
          {
              flag = (bool)value;
          }
          else if (value is bool?)
          {
              var nullable = (bool?)value;
              flag = nullable.GetValueOrDefault();
          }
          if (parameter != null)
          {
              if (bool.Parse((string)parameter))
              {
                  flag = !flag;
              }
          }
          if (flag)
          {
              return Visibility.Visible;
          }
          else
          {
              return Visibility.Collapsed;
          }
      }
  
      public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
      {
          var back = ((value is Visibility) &amp;&amp; (((Visibility)value) == Visibility.Visible));
          if (parameter != null)
          {
              if ((bool)parameter)
              {
                  back = !back;
              }
          }
          return back;
      }
  } 
  </code></pre>
  
  <p><strong>View Model:</strong></p>
  
  <pre><code>public class testviewModel : INotifyPropertyChanged
  {
      public bool isVisible  {get;set;}
      public testviewModel()
      {
          this.isVisible = true;
      }
      public event PropertyChangedEventHandler PropertyChanged;
      private void NotifyPropertyChanged(String propertyName)
      {
          if (null != PropertyChanged)
          {
              PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
          }
      }
      public void show()
      {
          this.isVisible = true;
      }
      public void hide()
      {
          this.isVisible = false;
      }
  }
  </code></pre>
  
  <p><strong>in App.cs</strong></p>
  
  <pre><code> private static testviewModel tviewModel = null;
      public static testviewModel TviewModel
      {
          get
          {
              if (tviewModel == null)
                  tviewModel = new testviewModel();
  
              return tviewModel;
          }
      }
  </code></pre>