Change visibility of a UWP button from code behind

Question

I have a "master frame" (which contains only the CommandBar) and some child frames, which are initially in a hub. Basically the frame changes, when one hub element is clicked on via "OnNavigated.."

Now I have some buttons (for example 1 and 2) which should not be visible, only when certain frames are chosen:

I've tried it with getter and setter methods:

In the Master-Frame code-methods:

 public static Visibility setVisibility
        {
            set { Button1.Visibility = value; }
        }

and in the Frame1 code behind:

MasterFrame.setVisibility = Visibility.Visible;

But I'm getting the error from Button1 "An object reference is...", because I have to use the "static" modifier to get access to the button from Frame1.

How can I get access to the button?

I don't even know if I'm using the "right" approach with the code-behind, but the MVVM seems to be not useful, as this isn't a CRUD-application (simple information without user-input.)

Answer 1

To hide a ui element just do this:

this.MyComponent.Visibility = Visibility.Collapsed;

And to make it visible do this:

this.MyComponent.Visibility = Visibility.Visible;

Answer 2

I don't even know if I'm using the "right" approach with the code-behind, but the MVVM seems to be not useful, as this isn't a CRUD-application (simple information without user-input.)

No, MVVM is useful, in the MVVM design pattern, developers can code app logic, and designers can create the UI. Although you're not developing a CRUD-application, MVVM pattern can still be used.

In a UWP app, Data Binding is very powerful. In this case, you can use data binding together with Converter to solve your problem.

I wrote a sample here to use Data Binding for event, and use Converter to judge the Visibility of Button and AppBarButtons:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.Resources>
        <Converter:VisiableOrNot x:Key="cvt" />
        <Converter:NaviButtonShowOrNot x:Key="btncvt" />
    </Grid.Resources>
    <CommandBar>
        <CommandBar.Content>
            <Grid>
                <TextBlock Text="Master-Frame" FontSize="20" Margin="20,10" />
            </Grid>
        </CommandBar.Content>
        <AppBarButton Icon="Accept" Label="appbarbutton" Visibility="{Binding ElementName=mainPageframe, Path=Content.BaseUri.AbsoluteUri, Converter={StaticResource cvt}}" />
        <AppBarButton Icon="Cancel" Label="appbarbutton" Visibility="{Binding ElementName=mainPageframe, Path=Content.BaseUri.AbsoluteUri, Converter={StaticResource cvt}}" />
    </CommandBar>
    <Frame x:Name="mainPageframe" Margin="0,55">
        <Hub x:Name="hub" SectionHeaderClick="{x:Bind MainPageViewModel.hub_SectionHeaderClick}">
            <HubSection x:Name="image1" Header="Image1" Width="200" IsHeaderInteractive="True">
                <DataTemplate>
                    <Grid>
                        <Image Source="Assets/111.png" Stretch="None" />
                    </Grid>
                </DataTemplate>
            </HubSection>
            <HubSection x:Name="image2" Header="Image2" Width="200" IsHeaderInteractive="True">
                <DataTemplate>
                    <Grid>
                        <Image Grid.Row="0" Source="Assets/222.png" Stretch="None" />
                    </Grid>
                </DataTemplate>
            </HubSection>
            <HubSection x:Name="image3" Header="Image3" Width="200" IsHeaderInteractive="True">
                <DataTemplate>
                    <Grid>
                        <Image Source="Assets/333.png" Stretch="None" />
                    </Grid>
                </DataTemplate>
            </HubSection>
        </Hub>
    </Frame>
    <Button Content="Go Back" Click="{x:Bind MainPageViewModel.Button_Click}" Background="PaleGreen" VerticalAlignment="Bottom" Margin="50,20" Visibility="{Binding ElementName=mainPageframe, Path=Content.BaseUri.AbsoluteUri, Converter={StaticResource btncvt}}" />
</Grid>

Code of VisiableOrNot converter:

 public class VisiableOrNot : IValueConverter
 {
     public object Convert(object value, Type targetType, object parameter, string language)
     {
         Uri uri = new Uri(value.ToString());
         if (uri != null)
         {
             if (uri.Equals("ms-appx:///View/Page3.xaml"))
             {
                 return Visibility.Visible;
             }
         }
         return Visibility.Collapsed;
     }

     public object ConvertBack(object value, Type targetType, object parameter, string language)
     {
         throw new NotImplementedException();
     }
 }

Here is the rendering image of my demo, the AppBarButtons can be seen only when the child frame's content is Page3. And the navigate back button can not be seen when it is on MainPage:

Here is my demo, you can download it and have a check.