How to change visibility of item in multiple instances of same user control

Question

How can I change the visibility of multiple instances of the same item for a user control? In my scenario I want the visibility of the StackPanel 'stackPanelInfo' to be changed. I.e. if I click the 'Show all descriptions' button, I want all 'stackPanelInfo' instances to be visible. When I click the 'Hide all descriptions' button, I want all 'stackPanelInfo' instances to be collapsed.

Code behind main page

public sealed partial class MainPage: Page
{
    public MainPage()
    {
        this.InitializeComponent();

        var flowerPage= new FlowerPage();

        TabView tabView = flowerPage.MyTabs;

        var tab1 = new TabViewItem { Header = "Tab 1" };
        tabView.Items.Add(tab1);

        tabView.SelectedItem = tab1;


        // tab content
        var scrollViewerTab = new ScrollViewer();
        var scrollViewerTab = new StackPanel { Orientation = Orientation.Vertical };
        scrollViewerTab .Content = stackPanel1stTab;
        tab1.Content = scrollViewer1stTab;

        var btnShowAllDescriptions = new Button();
        btnShowAllDescriptions.Content = "Show all descriptions";
        btnShowAllDescriptions.Click += btnShowAllDescriptions_Click;
        stackPanelTab.Children.Add(btnShowAllDescriptions);

        void btnShowAllDescriptions_Click(object sender, RoutedEventArgs e)
        {
           forEach(?){
               this.StackPanelFacilities.Visibility = Visibility.Visible;
           }
        }

        var btnHideAllDescriptions= new Button();
        btnHideAllDescriptions.Content = "Hide all descriptions";
        btnHideAllDescriptions.Click += btnHideAllDescriptions_Click;
        stackPanelTab.Children.Add(btnHideAllDescriptions);

        void btnCollapseAll_Click(object sender, RoutedEventArgs e)
        {
           forEach(?){
               this.StackPanelFacilities.Visibility = Visibility.Collapsed;
           }
        }

        var flowerControl1 = new FlowerUserControl();
        stackPanelTab.Children.Add(flowerControl1);

        var flowerControl2 = new FlowerUserControl();
        stackPanelTab.Children.Add(flowerControl2);


        flowerControl1.Title = "";
        flowerControl1.Description  = "";

        flowerControl2.Title = "";
        flowerControl2.Description  = "";

        MainGrid.Children.Add(flowerPage);
    }
}

XAML user control

<UserControl
    x:Class="MyApp.UserControls.FlowerUserControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="MyApp.UserControls"
    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <controls:DropShadowPanel x:Name="grd">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <StackPanel Grid.Row="0" Orientation="Horizontal">
                    <TextBlock x:Name="txtIntroduction"/>
                    <TextBlock x:Name="txtRating"/>
            </StackPanel>
            <StackPanel Grid.Row="1" Orientation="Vertical" x:Name="stackPanelInfo" Visibility="Collapsed">
                <TextBlock x:Name="txtLocation"/>
                <TextBlock x:Name="txtDescription"/>
            </StackPanel>
        </Grid>
    </controls:DropShadowPanel>
</UserControl>

Answer 1

Hello,

Welcome to Microsoft Q&A.

You can try to create the DependencyProperty of a page/usercontrol and bind it. When you press the button, you only need to modify this property to change the visibility of the control.

FlowerUserControl.xaml

...
<StackPanel Grid.Row="1" Orientation="Vertical" x:Name="stackPanelInfo" Visibility="{x:Bind DescriptionVisibility,Mode=OneWay}">
    <TextBlock x:Name="txtLocation"/>
    <TextBlock x:Name="txtDescription"/>
</StackPanel>
...

FlowerUserControl.xaml.cs

public Visibility DescriptionVisibility
{
    get { return (Visibility)GetValue(DescriptionVisibilityProperty); }
    set { SetValue(DescriptionVisibilityProperty, value); }
}

// Using a DependencyProperty as the backing store for DescriptionVisibility.  This enables animation, styling, binding, etc...
public static readonly DependencyProperty DescriptionVisibilityProperty =
    DependencyProperty.Register("DescriptionVisibility", typeof(Visibility), typeof(FlowerUserControl), new PropertyMetadata(Visibility.Collapsed));

MainPage.xaml

<Grid>
    <FlowerUserControl x:Name="Flower1" DescriptionVisibility="{x:Bind FlowerVisibility, Mode=OneWay}"/>
    <FlowerUserControl x:Name="Flower2" DescriptionVisibility="{x:Bind FlowerVisibility, Mode=OneWay}"/>
    <FlowerUserControl x:Name="Flower3" DescriptionVisibility="{x:Bind FlowerVisibility, Mode=OneWay}"/>
</Grid>

MainPage.xaml.cs

public Visibility FlowerVisibility
{
    get { return (Visibility)GetValue(FlowerVisibilityProperty); }
    set { SetValue(FlowerVisibilityProperty, value); }
}

public static readonly DependencyProperty FlowerVisibilityProperty =
    DependencyProperty.Register("FlowerVisibility", typeof(Visibility), typeof(MainPage), new PropertyMetadata(Visibility.Visible));

void btnCollapseAll_Click(object sender, RoutedEventArgs e)
{
    FlowerVisibility = Visibility.Collapsed;
}

Thanks.