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

在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控件得以隐藏的功能实现！最后我们来把它运行一下看看效果(如下图)，哈哈！

-

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