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控件得以隱藏的功能實現！最後我們來把它運行一下看看效果(如下圖)，哈哈！

-

好了，目的達到了，教程就到這裏，博主找工作去了，不然要吃土勒！