10-设计QQ主窗体

我们根据QQ2009的版本的主窗体为设计参考。
QQ主窗体和其他的窗体的设计差不多。主题也是使用DockPanel 然后结合stackpanel 就可以完成设计了。不过在QQ主窗体中我们的QQ好友和分类 使用了Button 容器
Button本身就是一个容器。所以可以在里面添加图片 和文字。这样可以实现按钮同时带有图片和文字。

<Button Background="Transparent"  Height="30"  BorderThickness="0">
    <StackPanel Orientation="Horizontal" Width="240" >
        <Image Width="15" Height="15" Source="images/player-play.png" Margin="3"/>
        <TextBlock VerticalAlignment="Center">我的好友[32/123]</TextBlock>
    </StackPanel>
</Button>Code language: HTML, XML (xml)

搜索框使用了style 让它有一定的弧度

<TextBox VerticalContentAlignment="Center" Name="TxtBoxName" Background="White" Text="" Width="240" Height="22" Margin="3">
    <TextBox.Resources>
        <Style TargetType="{x:Type Border}">
            <Setter Property="CornerRadius" Value="9"/>
            <Setter Property="BorderBrush" Value="#c1d0dc"/>
        </Style>
    </TextBox.Resources>
</TextBox>Code language: HTML, XML (xml)