How to hide elements and reserve its space in UWP

Question

I'm trying to hide elements in UWP but i can't reserve its space.

I've tried to change Visibility but there is no option to set Visibility to Hidden.

I can only set Visibility to Visible or Collapsed.

Would anyone know how to do this in UWP?.

Answer 1

One solution is to modify the brush to be empty when the control is disabled.

If it is a general control, you can modify the style of the control with VisualStateManager when it is disabled.

Take the button control as an example.

1. Override the style of the button control, and modify the brush to be empty in <VisualState x:Name="Disabled">.

<Page.Resources>
        <Style x:Key="ButtonStyle1" TargetType="Button">
            <Setter Property="Background" Value="{ThemeResource ButtonBackground}"/>
            ...
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" Background="{TemplateBinding Background}" BackgroundSizing="{TemplateBinding BackgroundSizing}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" ContentTemplate="{TemplateBinding ContentTemplate}" CornerRadius="{TemplateBinding CornerRadius}" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" />
                                            </ObjectAnimationUsingKeyFrames>
                                             ...

---

<Button Style="{StaticResource ButtonStyle1}" x:Name="myButton" .../>

2. When you need to hide it, set the control to Disabled.

   myButton.IsEnabled = false;