开发工具与关键技术:wpf
作者:龙文浩
撰写时间:2019年6月4日
制作一个主页面,需要Grid布局和嵌套的内容,使用Grid布局,把页面分成四个等分,每个等份的高度使用*号来划分:
<Grid.RowDefinitions>
</Grid.RowDefinitions>
这里有几个动画,开始时,窗体从左边弹跳进来,1.5秒后落到屏幕中间,关闭窗体,窗体像窗帘一样收缩,最后消失不见,嵌套页面放在中间,左边的那些就是图标+文字,如果自己去画几何体,画得不好看,最后是使用ps制作成小图标,或有些在网上找得到的图标,按照冷色调搭配上去即可,既然是中国电信的系统,那放置的图标工具,尽量符合主题就行了:
在页面的头部,需设置下面几个属性,设置好这几个属性,就是让窗体本身透明,其实还是存在的,只是让它看不见,然后主题内容弹跳进来,就感觉看到窗体弹跳进来一样的了:
Foreground="{x:Null}"
Background="{x:Null}"
Icon="/_2Image/0052.png"
AllowsTransparency=“True”
WindowStartupLocation=“CenterScreen”
Loaded=“Window_Loaded”
Title=“MainWindow”
Width=“1286” Height=“728” x:Name=“Window_1”
然后,下面是窗体的代码,窗体的代码主要使用的是网格布局,这里面调用的许多的公共资源,这些就需要自己去定义了,由于篇幅的原因,这里就不抛出来了,在窗体的左边那些是用户控件,在页面加载事件的时候嵌套进来的,右边的那张是p过的图片:
<Border.BorderBrush>
</Border.BorderBrush>
<Grid.RowDefinitions>
<RowDefinition Height="1.3*"></RowDefinition>
<RowDefinition Height="0.7*"></RowDefinition>
<RowDefinition Height="9*"></RowDefinition>
<RowDefinition Height=".4*"></RowDefinition>
</Grid.RowDefinitions>
<!--头部`````````````````````````````````````````````````````````````````开始-->
<Grid Grid.Column="0" >
<Grid.Background>
<ImageBrush ImageSource="/_2Image/0049.jpg"></ImageBrush>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="7*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".75*"></ColumnDefinition>
<ColumnDefinition Width="14*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<!--````````````大标题•••开始``````````````-->
<Image Grid.Column="1" Source="/_2Image\0001.png" HorizontalAlignment="Center" Margin="346.2,0,804,0.2"/>
<Grid Grid.Row="1" Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="2*"></RowDefinition>
<RowDefinition Height="5*"></RowDefinition>
<RowDefinition Height="2*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock FontSize="20" VerticalAlignment="Center" HorizontalAlignment="Center"
Cursor="Pen" Grid.Row="1" >
<TextBlock.Effect>
<DropShadowEffect/>
</TextBlock.Effect>
<TextBlock.Text>
中 国 电 信 湖 北 公 司 渠 道 营 销 支 撑 系 统
</TextBlock.Text>
<TextBlock.Foreground>
White
</TextBlock.Foreground>
</TextBlock>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1" HorizontalAlignment="Right" Foreground="#FFF9F9F9">面向客户的精确营销支撑平台</TextBlock>
</Grid>
<!--•••••••最顶端切换按钮 开始•••••••-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Cursor="Hand" MouseDown="Grid_MouseDown_1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Source="/_2Image\0000.png" ></Image>
<TextBlock Grid.Column="1" Text="切换岗位 |" Foreground="AliceBlue"></TextBlock>
</Grid>
<Grid Grid.Column="1" Cursor="Hand" MouseDown="Grid_MouseDown">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Source="/_2Image\0006.png" ></Image>
<TextBlock Grid.Column="1" Text="个人信息 |" Foreground="AliceBlue"></TextBlock>
</Grid>
<Grid Grid.Column="2" Cursor="Hand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Source="/_2Image\0007.png" ></Image>
<TextBlock Grid.Column="1" Text="系统指南 |" Foreground="AliceBlue"></TextBlock>
</Grid>
<Grid Grid.Column="3" MouseDown="TextBlock_MouseDown_1" Cursor="Hand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Source="/_2Image\0023.png" ></Image>
<TextBlock Grid.Column="1" Text="最小化 |" Foreground="AliceBlue"></TextBlock>
</Grid>
<Grid Grid.Column="4" MouseDown="TextBlock_MouseDown_2" Cursor="Hand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Source="/_2Image\0026.png" ></Image>
<TextBlock Grid.Column="1" Text="最大化 |" Foreground="AliceBlue"></TextBlock>
</Grid>
<Grid Grid.Column="5" MouseDown="TextBlock_MouseDown_4" Cursor="Hand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Source="/_2Image\0027.png" ></Image>
<TextBlock Grid.Column="1" Text="还原 |" Foreground="AliceBlue"></TextBlock>
</Grid>
<Grid Grid.Column="6" MouseDown="TextBlock_MouseDown_3" Cursor="Hand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Source="/_2Image\0019.png" ></Image>
<TextBlock Grid.Column="1" Text="退出 |" Foreground="AliceBlue"></TextBlock>
</Grid>
</Grid>
</Grid>
<!--•••••••最顶端切换按钮 结束•••••••-->
</Grid>
<!--````````````大标题•••结束``````````````-->
</Grid>
<!--头部`````````````````````````````````````````````````````````````````结束-->
<!--导航栏•••••••••••••••••••••••••••`````````开始-->
<Border Grid.Row="1" Grid.Column="0">
<Border.Background>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="#FF8FB3E7" Offset="0.1"/>
<GradientStop Color="#FF5689D8" Offset="0.5"/>
<GradientStop Color="#FF87ADE5" Offset="1"></GradientStop>
</LinearGradientBrush>
</Border.Background>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition Width="8*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" BorderBrush="#fff" Click="Button_Click"
Style="{DynamicResource ButtonAnimation_1}" ToolTip="首页">
<Image Source="/_2Image\0052.png"></Image>
</Button>
<Button Grid.Column="1" BorderBrush="#fff" Click="Button_Click_2"
Style="{DynamicResource ButtonAnimation_1}" ToolTip="日志与计划">
<Image Source="/_2Image\0054.png"></Image>
</Button>
<Button Grid.Column="2" BorderBrush="#fff" Click="Button_Click_3"
Style="{DynamicResource ButtonAnimation_1}" ToolTip="我的工作">
<Image Source="/_2Image\0055.png"></Image>
</Button>
<Button Grid.Column="3" BorderBrush="#fff" Click="Button_Click_1"
Style="{DynamicResource ButtonAnimation_1}" ToolTip="划分认领">
<Image Source="/_2Image\0062.png"></Image>
</Button>
<Button Grid.Column="4" BorderBrush="#fff" Click="Button_Click_4"
Style="{DynamicResource ButtonAnimation_1}" ToolTip="我的客户">
<Image Source="/_2Image\0057.png"></Image>
</Button>
<Button Grid.Column="5" BorderBrush="#fff" Click="Button_Click_5"
Style="{DynamicResource ButtonAnimation_1}" ToolTip="查询平台">
<Image Source="/_2Image\0095.png"></Image>
</Button>
<Button Grid.Column="6" BorderBrush="#fff" Click="Button_Click_6"
Style="{DynamicResource ButtonAnimation_1}" ToolTip="我的报表">
<Image Source="/_2Image\0096.png"></Image>
</Button>
<Button Grid.Column="7" BorderBrush="#fff" Click="Button_Click_7"
Style="{DynamicResource ButtonAnimation_1}" ToolTip="营销管理">
<Image Source="/_2Image\0060.png"></Image>
</Button>
<Button Grid.Column="8" BorderBrush="#fff" Click="Button_Click_8"
Style="{DynamicResource ButtonAnimation_1}" ToolTip="商机管理">
<Image Source="/_2Image\0061.png"></Image>
</Button>
<Button Grid.Column="9" BorderBrush="#fff" Click="Button_Click_9"
Style="{DynamicResource ButtonAnimation_1}" ToolTip="系统管理">
<Image Source="/_2Image\0097.png"></Image>
</Button>
<Button Grid.Column="10"
Style="{DynamicResource ButtonAnimation_1}" >
<Image Source="/_2Image\0066.png"></Image>
</Button>
</Grid>
</Border>
<!--导航栏•••••••••••••••••••••••••••`````````结束-->
<!--主页面``````````````````````````````````````````````````````````````````开始-->
<Grid Grid.Row="2" Grid.Column="0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="5*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<!--左边菜单栏••••••••••••••••开始-->
<Grid Grid.Row="0" Grid.Column="0" >
<StackPanel Name="Grid_1">
<StackPanel.Background>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFD6E2F6" Offset="0"/>
<GradientStop Color="#FF6295E0" Offset=".5"/>
<GradientStop Color="#FF80A8E2" Offset="1"/>
</LinearGradientBrush>
</StackPanel.Background>
</StackPanel>
</Grid>
<!--左边菜单栏••••••••••••••••结束-->
<!--右边菜单栏••••••••••••••••开始-->
<Grid Grid.Column="1" Style="{DynamicResource GridStyle_1}">
<ScrollViewer x:Name="Grid_2">
</ScrollViewer>
</Grid>
<!--右边菜单栏••••••••••••••••结束-->
</Grid>
<!--主页面``````````````````````````````````````````````````````````````````结束-->
<!--底部``````````````````````````````````````````````````````````````````开始-->
<Grid Grid.Row="3">
<Grid.Background>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFB7D0F4" Offset="0"/>
<GradientStop Color="#FF437ED4" Offset="0.5"/>
<GradientStop Color="#FFB1C9EE" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<WrapPanel VerticalAlignment="Center" Orientation="Horizontal" Grid.Column="0">
<TextBlock Foreground="#FFEAEAEA">系统消息:</TextBlock>
<TextBlock FontSize="10" Foreground="Beige" >当前版本号 V 1.99.vb.11090.//123sd.aass.//.0vn</TextBlock>
</WrapPanel>
<WrapPanel VerticalAlignment="Center" Orientation="Horizontal" Grid.Column="2">
<TextBlock>
<Run Text="----------------------- 中国电信为您服务" Foreground="Beige"/>
</TextBlock>
</WrapPanel>
</Grid>
<!--底部``````````````````````````````````````````````````````````````````结束-->
</Grid>
</Border>
动画资源,自己定义即可,上面是窗体的代码,图片需要自己手动去定义;