(初學)wpf仿QQ界面-整體布局


     跟一個小學弟一起學習wpf,小學弟是剛初中畢業,對編程剛剛接觸,我挺怕自己帶的不好,影響小學弟以后在編程方向的學習興趣。我承認自己水平不高,但是在努力去學習新知識!一起加油吧!在此以博客,記錄學習進度。

       

<Window x:Class="QQ.MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:local="clr-namespace:QQ"
         mc:Ignorable="d"
         Title="MainWindow" WindowStyle="None" Height="350" Width="525" WindowStartupLocation="CenterScreen">


<Grid>
    <!--設置窗體的陰影效果-->(關於設置窗體的陰影透明效果還不是很理解,此段代碼是在網上copy過來的,不明其意)
      <Border Background="#FFFFFF" CornerRadius="3" Margin="{TemplateBinding Padding}">
            <Border.Effect>
                       <DropShadowEffect BlurRadius="15" Direction="-90" RenderingBias="Quality" ShadowDepth="2"/>
             </Border.Effect>
    <!-- 登錄面板 -->
   <Grid Height="483" Width="458" Visibility="Visible" >
             <!--總體分三行-->
             <Grid.RowDefinitions>
                       <RowDefinition Height="30"></RowDefinition>
                       <RowDefinition Height="150"></RowDefinition>
                       <RowDefinition Height="150"></RowDefinition>
              </Grid.RowDefinitions>
         <!--第一行-->
        <Grid Grid.Row="0">
                 <!--第一行分兩列-->
                 <Grid.ColumnDefinitions >
                          <ColumnDefinition Width="340"></ColumnDefinition>
                          <ColumnDefinition ></ColumnDefinition>
                 </Grid.ColumnDefinitions>
         </Grid>
         <!--第二行-->
         <Grid Grid.Row="1"></Grid>
          <!--第三行-->
          <Grid Grid.Row="2">
                    <!--第三行分三列-->
                  <Grid.ColumnDefinitions>
                              <ColumnDefinition Width="136"></ColumnDefinition>
                              <ColumnDefinition Width="192"></ColumnDefinition>
                              <ColumnDefinition></ColumnDefinition>
                   </Grid.ColumnDefinitions>
                    <!--第三行第一列-->
                   <Grid Grid.Column="0">
                               <!--分兩行-->
                               <Grid.RowDefinitions>
                                          <RowDefinition Height="3*"></RowDefinition>
                                          <RowDefinition></RowDefinition>
                               </Grid.RowDefinitions>
           </Grid>
            <!--第三行第二列-->
            <Grid Grid.Column="1">
                      <!--分四行-->
                      <Grid.RowDefinitions>
                                <RowDefinition></RowDefinition>
                                <RowDefinition></RowDefinition>
                                <RowDefinition></RowDefinition>
                                <RowDefinition></RowDefinition>
                     </Grid.RowDefinitions>
            </Grid>
            <!--第三行第三列-->
             <Grid Grid.Column="2">
                           <!--分三行-->
                           <Grid.RowDefinitions>
                                      <RowDefinition></RowDefinition>
                                      <RowDefinition></RowDefinition>
                                      <RowDefinition Height="2*"></RowDefinition>
                           </Grid.RowDefinitions>
            </Grid>

         </Grid>
      </Grid>
</Border>
  <!--主界面- -->
 <Grid>
  (待完成......)
 </Grid>
</Grid>
</Window>

  總體思路就是用Grid面板布局,分行和分列。這是登錄窗體的整體布局,QQ個人主頁的布局也是如此,還未完成。我們會在一個大的Grid面板里放兩個小的Grid面板,分別是登錄界面和個人主界面,然后添加組件,實現按鈕的單擊事件,我們自己做的這些還算簡單。開始深入淺出wpf之旅!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM