从后面的代码更改UWP按钮的可见性

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

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 AppBarButton s:

<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 AppBarButton s 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.

Answer 2

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;