09-聊天窗口中间区域编辑框和信息框的设计

我们这里的编辑框只是修饰而已。并没有功能。如果感兴趣的同学 可以去把它完成了。
我们的编辑框的工具栏 是显示一些带小图标的按钮

<Button Width="30" Margin="3" BorderThickness="0">
    <Button.Background>
        <ImageBrush ImageSource="file_font.png"/>
    </Button.Background>
</Button>Code language: HTML, XML (xml)

输入框支持到右侧边框的时候 换行

<TextBox Name="TxtBoxName" Padding="8" Background="White" BorderThickness="0" Height="110" AcceptsReturn="True" TextWrapping="Wrap" />Code language: HTML, XML (xml)

底部的按钮 我们通过设置第一个按钮的左侧边距 来让它看上去是靠右的

<StackPanel Background="#E8F3F9" Orientation="Horizontal" Height="30">
    <Button x:Name="button" Content="发送" Width="75" Margin="285,3,10,3"/>
    <Button x:Name="button1" Content="取消" Width="75" Margin="0,3,3,3"/>
</StackPanel>

<StackPanel Orientation="Vertical" Background="Transparent" >
    <StackPanel Background="White" Height="280">

    </StackPanel>
    <StackPanel Background="#E8F3F9" Orientation="Horizontal" Height="25">
        <Button Width="30" Margin="3" BorderThickness="0">
            <Button.Background>
                <ImageBrush ImageSource="images/file_font.png"/>
            </Button.Background>
        </Button>
        <Button Width="30" Margin="3" BorderThickness="0">
            <Button.Background>
                <ImageBrush ImageSource="images/color_wheel.png"/>
            </Button.Background>
        </Button>
        <Button Width="30" Margin="3" BorderThickness="0">
            <Button.Background>
                <ImageBrush ImageSource="images/emotion_bigsmile.png"/>
            </Button.Background>
        </Button>
        <Button Width="30" Margin="3" BorderThickness="0">
            <Button.Background>
                <ImageBrush ImageSource="images/picture_icon.png"/>
            </Button.Background>
        </Button>
        <Button Width="30" Margin="3" BorderThickness="0">
            <Button.Background>
                <ImageBrush ImageSource="images/upload2.png"/>
            </Button.Background>
        </Button>
    </StackPanel>
    <StackPanel Background="White" Height="96">
        <TextBox Name="TxtBoxName" Padding="8" Background="White" BorderThickness="0" Height="90" AcceptsReturn="True" TextWrapping="Wrap" />
    </StackPanel>
    <StackPanel Background="#E8F3F9" Orientation="Horizontal" Height="30">
        <Button x:Name="button" Content="发送" Width="75" Margin="285,3,10,3"/>
        <Button x:Name="button1" Content="取消" Width="75" Margin="0,3,3,3"/>
    </StackPanel>
</StackPanel>Code language: HTML, XML (xml)

设置聊天框的QQ好友的头像
可以设置长宽的

<Image Width="60" Height="60" Margin="10" Source="images/avatar.jpg"></Image>Code language: HTML, XML (xml)