How to toggle Textblock visibility from button click

Apptacular Apps 386 Reputation points
2020-06-27T16:08:21.013+00:00

How can the visibility of an item in the same user control be toggled using a button (via a click event)? I was thinking something similar to the default ToggleSwitch event but does something extra need to be added?

When the UserControl is loaded:

  • I want the button content to be "Show more".
  • I want the description text to be collapsed.

When the button is clicked:

  • If the description text is collapsed, I want the button text to change to "Show less" & the description text to be visible.
  • If the description text is visible, I want the button text to change to "Show more" & the description text to be collapsed.

XAML

<UserControl
    x:Class="MyApp.UserControls.MyUserControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using: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="Vertical">
                <TextBlock x:Name="txtTitle" Text="Sunflower"/>

                <Button x:Name="myBtn" Click="myBtn_Click">
                    <TextBlock x:Name="txtBtn"/>
                </Button>
            </StackPanel>
            <StackPanel Grid.Row="1" Orientation="Vertical" x:Name="myStackPanel">
                <TextBlock x:Name="txtDescription" Text="Description"/>
            </StackPanel>
        </Grid>
    </controls:DropShadowPanel>
</UserControl>

CS (ToggleSwitch)

private void ToggleSwitch_Toggled(object sender, RoutedEventArgs e)
        {
            ToggleSwitch toggleSwitch = sender as ToggleSwitch;
            if (toggleSwitch != null)
            {
                if (toggleSwitch.IsOn == true)
                {
                    progress1.IsActive = true;
                    progress1.Visibility = Visibility.Visible;
                }
                else
                {
                    progress1.IsActive = false;
                    progress1.Visibility = Visibility.Collapsed;
                }
            }
        }

CS (Button)

        private void myBtn_Click(object sender, RoutedEventArgs e)
        {
            Button btnE = sender as Button;
            if (btnE != null)
            {
            //        progress1.IsActive = true; ?
                progress1.Visibility = Visibility.Visible;
                txtBtn.Text = "Show less"
            }
            else
            {
            //        progress1.IsActive = false; ?
                progress1.Visibility = Visibility.Collapsed;
                txtBtn.Text = "Show more"
            }
        }
Universal Windows Platform (UWP)
0 comments No comments
{count} votes

Accepted answer
  1. Matt Lacey 791 Reputation points
    2020-06-27T17:08:44.583+00:00
    • Initialize the default state in XAML (or could do it in the loaded event handler)
    • Use the current visibility to track state and make changes accordingly.

    XAML

        <Button x:Name="TogglingButton" Content="Show more" Click="TogglingButtonClicked" />
        <TextBlock x:Name="Description" Text="Blah blah blah" Visibility="Collapsed" />
    

    Code Behind

    private void TogglingButtonClicked(object sender, RoutedEventArgs e)
    {
        if (this.Description.Visibility == Visibility.Collapsed)
        {
            this.Description.Visibility = Visibility.Visible;
            this.TogglingButton.Content = "Show less";
        }
        else
        {
            this.Description.Visibility = Visibility.Collapsed;
            this.TogglingButton.Content = "Show more";
        }
    }
    
    1 person found this answer helpful.
    0 comments No comments

0 additional answers

Sort by: Most helpful

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.