创建WPF项目

VS创建一个C#的WPF应用程序:
在这里插入图片描述创建完成后项目目录下会有一个MainWindow.xaml文件以及MainWindow.cs文件,此处将MainWindow.xaml文件作为主页面的布局文件,也即为页面的主题布局都在该文件进行。

布局和数据

在这里插入图片描述

主体布局

Wechat的布局可暂时分为三列,
第一列为菜单区域,
第二列为消息列表区域,
第三列为消息内容区域。所以此处必然要用<Grid/ >组件。

<Grid Background="White">
    <Grid.ColumnDefinitions>
        <!-- 菜单宽度自适应 -->
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <!-- 内容区填满剩余空间 -->
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid Grid.Column="0" Background="Gray"></Grid>
    <!--消息列表-->
    <Grid Grid.Column="1"></Grid>
    <Grid Grid.Column="2"></<Grid>
<Grid/>

菜单布局

  1. 菜单栏的顶部有图像,
  2. 菜单按钮分为上下两部分,

可将菜单区域分为两部分,上部分为图像,下部分为菜单按钮,使用<Grid/ >组件。
图像可使用<Borde / >包裹,
菜单按钮可使用<DockPanel/ >包裹,
菜单按钮分为上下两部分,正好分别放置在<DockPanel/ >的Top和Bottom位置。

<Grid Grid.Column="0" Background="Gray">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Border Grid.Row="0" Height="60">
        <Image Source="Images/kun.png"  Height="35" Margin="0,15,0,5"/>
    </Border>
    <DockPanel Grid.Row="1" LastChildFill="False" Width="45" Background="Gray">
		<Menu DockPanel.Dock="Top" Width="45" Background="Transparent"></Menu>
		<Menu DockPanel.Dock="Bottom" Width="45" Background="Transparent"></Menu>
	</DockPanel>
<Grid/>

在Menu中填充合适的Item,因为菜单按钮为Icon,所以需要下载合适的图片

<Menu DockPanel.Dock="Top" Width="45" Background="Transparent">
    <MenuItem Height="45" Width="45" Click="MenuItem_Click1" >
        <MenuItem.Header>
            <Image Source="Images/icon001.png"  Height="25" Margin="4,0,0,0"/>
        </MenuItem.Header>
    </MenuItem>
    <MenuItem Height="45" Width="45" Click="MenuItem_Click2" >
        <MenuItem.Header>
            <Image Source="Images/icon002.png"  Height="25" Margin="4,0,0,0"/>
        </MenuItem.Header>
    </MenuItem>
    <MenuItem Height="45" Width="45" Click="MenuItem_Click3">
        <MenuItem.Header>
            <Image Source="Images/icon003.png"  Height="25" Margin="4,0,0,0"/>
        </MenuItem.Header>
    </MenuItem>
    <MenuItem Height="45" Width="45" Click="MenuItem_Click4">
        <MenuItem.Header>
            <Image Source="Images/icon009.png"  Height="25" Margin="4,0,0,0"/>
        </MenuItem.Header>
    </MenuItem>
</Menu>

<Menu DockPanel.Dock="Bottom" Width="45" Background="Transparent">
    <MenuItem Height="45" Width="45" Click="MenuItem_Click5">
        <MenuItem.Header>
            <Image Source="Images/icon006.png"  Height="25" Margin="4,0,0,0"/>
        </MenuItem.Header>
    </MenuItem>
    <MenuItem Height="45" Width="45" Click="MenuItem_Click5" Margin="0,0,0,15">
        <MenuItem.Header>
            <Image Source="Images/icon005.png"  Height="25" Margin="4,0,0,0"/>
        </MenuItem.Header>
    </MenuItem>
</Menu>

消息列表处放置一个Frame组件,因为点击不同按钮时显示的内容不同,需要根据按钮点击来选择显示内容。

<!--消息列表-->
<Grid Grid.Column="1">
    <Frame Name="mainFrame" NavigationUIVisibility="Hidden" />
</Grid>

Frame自带导航按钮,通过属性

NavigationUIVisibility="Hidden"

隐藏。

自带的系统窗口按钮可去掉,使用自定义的。

<Window x:Class="WeChat.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:WeChat"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800"
        WindowStyle="None"
        AllowsTransparency="True" 
        Background="Transparent"
        OpacityMask="White"
        MouseMove="Move_MouseMove"
        Icon="Images/favicon.ico">

在其中加入了以下代码:

 WindowStyle="None"
 AllowsTransparency="True" 
 Background="Transparent"
 OpacityMask="White"
 MouseMove="Move_MouseMove"

将内容显示区域分为上下两部分,一部分固定为自定义的窗口按钮,一部分为显示数据区域,
使用 <Grid/ >组件

<Grid Grid.Column="2">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <!--自定义系统菜单 -->
    <Border Grid.Row="0" Background="White" BorderThickness="0,0,0,0" BorderBrush="WhiteSmoke"></Border>
    <!--内容 -->
    <ContentControl Grid.Row="1" Margin="0" x:Name="contentArea"/>
</Grid>

主体布局完毕,
在这里插入图片描述

在这里插入图片描述

MainWindow.xaml

<Window x:Class="WeChat.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:WeChat"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800"
        WindowStyle="None"
        AllowsTransparency="True" 
        Background="Transparent"
        OpacityMask="White"
        MouseMove="Move_MouseMove"
        Icon="Images/favicon.ico">

    <Grid Background="White">
        <Grid.ColumnDefinitions>
            <!-- 菜单宽度自适应 -->
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <!-- 内容区填满剩余空间 -->
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid Grid.Column="0" Background="Gray">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Border Grid.Row="0" Height="60">
                <Image Source="Images/kun.png"  Height="35" Margin="0,15,0,5"/>
            </Border>
            <DockPanel Grid.Row="1" LastChildFill="False" Width="45" Background="

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部