07-QQ聊天界面的设计

创建一个WindowChat窗体。
我们来看一下我们这个聊天框大概是怎么样的。
我们的这个界面是一个顶部 右侧 和中间的布局设计。没有底部 没有左侧。

先设置顶部

<DockPanel LastChildFill="False" Background="White">
    <StackPanel Orientation="Vertical" Background="#477295" DockPanel.Dock="Top" Height="120">
        <StackPanel DockPanel.Dock="Right" Orientation="Horizontal" Background="Transparent" HorizontalAlignment="Right">
            <Button Content=" - " Foreground="White" Background="Transparent" BorderThickness="0" Click="Button_Click_1" Margin="0,5,15,2"></Button>
            <Button Content=" x " Foreground="White" Background="Transparent" BorderThickness="0" Click="Button_Click" Margin="0,5,5,2"></Button>
        </StackPanel>
        <StackPanel Orientation="Horizontal">
            <Image Width="100" Height="100" Source="images/qq.png"></Image>
            <StackPanel Orientation="Vertical">
                <TextBlock Text="潘小姐 AndyBaby~~~" Foreground="White" Margin="0,25,0,0"></TextBlock>
                <TextBlock Text="快乐开心每一天" Foreground="#CDE4EB" Margin="0,10"></TextBlock>
            </StackPanel>
        </StackPanel>
    </StackPanel>
</DockPanel>Code language: HTML, XML (xml)