Win10开发之UWP控件的隐藏空间

来源:互联网 发布:邪典电影 知乎 编辑:程序博客网 时间:2024/06/04 19:24

在UWP的开发中,我们想要充分的利用整个屏幕的空间,我们可以用隐藏的方式进行。话不多说,我先来上图看看效果!
这里写图片描述

-

这里写图片描述

这就是我这篇博客所要说的UWP的控件隐藏!接下来我们来上教程,一步步教你,简单易懂,哈哈哈哈哈!

—————-我是万恶分割线————–

        <Grid.RowDefinitions>            <RowDefinition Height="auto"/>            <RowDefinition Height="auto"/>            <RowDefinition Height="auto"/>            <RowDefinition Height="auto"/>        </Grid.RowDefinitions>        <Grid Name="gridSettings" Grid.Row="1">            <Grid.RowDefinitions>                <RowDefinition Height="auto"/>                <RowDefinition Height="auto"/>                <RowDefinition Height="auto"/>                <RowDefinition Height="auto"/>            </Grid.RowDefinitions>            <Grid.ColumnDefinitions>                <ColumnDefinition Width="*"/>            </Grid.ColumnDefinitions>            <StackPanel Grid.Row="0"                         Grid.Column="0"                         Margin="5"                         Orientation="Horizontal">            </StackPanel>            <StackPanel Grid.Row="1"                         Margin="5"                         Grid.Column="0">            </StackPanel>            <StackPanel Grid.Row="2"                         Grid.Column="0"                         Orientation="Horizontal"                         Margin="5">                <StackPanel BorderThickness="2"                             Margin="5,0,0,0"                             BorderBrush="Black">                    <ScrollViewer MaxWidth="280"                                   MinWidth="200"                                   MaxHeight="300"                                   MinHeight="150" >                        <Image/>                    </ScrollViewer>                </StackPanel>            </StackPanel>            <StackPanel Grid.Row="3"                         Grid.Column="0"                         Orientation="Horizontal"                         Margin="10">                <TextBox Name="txtName"                          Margin="5,0,0,0"                          MaxLength="50"                           Width="200"                          PlaceholderText="这是隐藏之前的控件"/>            </StackPanel>        </Grid>        <Button Grid.Row="2"                 Grid.Column="0"                 Content="︽"                 VerticalAlignment="Center"                  BorderBrush="Black"                 BorderThickness="1"                 HorizontalAlignment="Stretch"                 Name="btnHide"                 Click="btnHide_Click">            <Button.Background>                <SolidColorBrush Opacity="0"/>            </Button.Background>        </Button>        <StackPanel Name="spGame"                     Orientation="Vertical"                     Grid.Row="3">            <Grid>                <Grid.ColumnDefinitions>                    <ColumnDefinition Width="*"/>                    <ColumnDefinition Width="*"/>                </Grid.ColumnDefinitions>            </Grid>        </StackPanel>

这写的是UI界面,接下来我写的就是后台控制空间的隐藏功能

private void btnHide_Click(object sender, RoutedEventArgs e)        {            if (gridSettings.Visibility == Visibility.Collapsed)            {                btnHide.Content = "︽点击看看";                gridSettings.Visibility = Visibility.Visible;                spGame.Visibility = Visibility.Collapsed;            }            else            {                btnHide.Content = "︾隐藏之后";                gridSettings.Visibility = Visibility.Collapsed;                spGame.Visibility = Visibility.Visible;            }        }

这个函数就是使得UI控件得以隐藏的功能实现!最后我们来把它运行一下看看效果(如下图),哈哈!
这里写图片描述

-

这里写图片描述

好了,目的达到了,教程就到这里,博主找工作去了,不然要吃土勒!

0 0