浅谈c# WPF 页面设计及与JAVA联系

本文链接：https://blog.csdn.net/weixin_51748995/article/details/139180573

1.整体介绍（WPF里面的重点）

a.WPF整体架构（MVVM）
b.WPF重要语法以及设计框架
c.资源控件及用户字典

2.WPF整体架构（MVVM）

整体架构设计如下图一所示
在这里插入图片描述
图一中 Models 是数据类型层，也就是JAVA里面的类那一层，主要负责对基本数据类型的定义
ModelVIews是数据层，处理从Models里面来的数据，对数据初始化，以及通知后端
OpCommand是自定义工具，这里是定义了一个页面跳转的委托
Resource是资源层，UserControls是用户控件
View是视图层，zidian是资源字典

3.WPF重要语法以及设计框架

a.Grid 相当于一个容器，可以看作是一个div 用来定义行列关系

** 在这里插入图片描述

b.textblock 用于处理文字**

<TextBlock Text="&#xe68d;" FontFamily="../Resource/Fonts/#iconfont" Foreground="#99ffffff" Margin="5,0"></TextBlock>

FontFamily样式，Foreground颜色，FontSize大小

c.Stackpanle 用于存放东西，常用于存两个不同的东西，可以规定其位置及摆放顺序

<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left">
    <TextBlock Text="&#xe68d;" FontFamily="../Resource/Fonts/#iconfont" Foreground="#99ffffff" Margin="5,0"></TextBlock>
    <TextBlock Text="报警记录" Foreground="#99ffffff"></TextBlock>
</StackPanel>

D.UniformGrid用来展示相同大小的东西，常用于循环展示itemscontrol中

<UniformGrid Columns="4"></UniformGrid>

E.ItemsControl用于循环展示

<ItemsControl ItemsSource="{Binding getDivces}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="4"></UniformGrid>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,5">
                <TextBlock Text="{Binding Value}" FontSize="16" Foreground="#ff2bedf1" Margin="0,5" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
                <TextBlock Text="{Binding DeviceItem}" FontSize="10" Foreground="#aaffffff" Margin="0,5" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>

ItemsControl.ItemsPanel展示的panel，DataTemplate展示的数据

F.RadialGradientBrush渐变色

<RadialGradientBrush>
    <GradientStop Color="#ff285173" Offset="0"></GradientStop>
    <GradientStop Color="#ff244967" Offset="0.5"></GradientStop>
    <GradientStop Color="#ff14273a" Offset="1"></GradientStop>
</RadialGradientBrush>

设置整个的背景，通过画刷进行渐变色的设计，offset是与中心的距离，由里向外
RadialGradientBrush，由里向外
LinearGradientBrush,由左向右

G.LiveCharts.Wpf一个插件用于画图

    <lvc:CartesianChart Margin="20,35,20,5">
        <lvc:CartesianChart.AxisX>
            <lvc:Axis Labels="1#,2#,3#,4#,5#,6#">
                <lvc:Axis.Separator>
                    <lvc:Separator Step="1" StrokeThickness="0"></lvc:Separator>
                </lvc:Axis.Separator>
            </lvc:Axis>
        </lvc:CartesianChart.AxisX>
        <!--定义Y的数据 LineSeries这里样式不一样-->
        <lvc:CartesianChart.Series>
            <lvc:LineSeries Values="8,2,7,6,4,14" PointGeometrySize="0" Stroke="#ff2bedf1" >
                <!--渐变色-->
                <lvc:LineSeries.Fill>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                        <GradientStop Color="#552bedf1" Offset="0"></GradientStop>
                        <GradientStop Color="Transparent" Offset="1"></GradientStop>
                    </LinearGradientBrush>
                </lvc:LineSeries.Fill>
            </lvc:LineSeries>
        </lvc:CartesianChart.Series>
        <!--Y数据刻度-->
        <lvc:CartesianChart.AxisY>
            <lvc:Axis MinValue="0" MaxValue="15" >
                <lvc:Axis.Separator>
                    <lvc:Separator Step="5" Stroke="#11ffffff"></lvc:Separator>
                </lvc:Axis.Separator>
            </lvc:Axis>
        </lvc:CartesianChart.AxisY>
    </lvc:CartesianChart>
</Grid>

H.GroupBox盒子 ScrollViewer 滚动控件 RadioButton单选框

VerticalScrollBarVisibility="Hidden"隐藏ScrollViewer的进度条

<TextBlock Text="机台状态" Foreground="White" VerticalAlignment="Center"></TextBlock>
<RadioButton Content="全部"  IsChecked="True"></RadioButton>
<RadioButton Content="作业"></RadioButton>
<RadioButton Content="等待"></RadioButton>
<RadioButton Content="故障"></RadioButton>
<RadioButton Content="停机"></RadioButton>

4.资源控件及用户字典

**
用户字典相当于JAVA里面的css 用于处理样式

<Style TargetType="Button" x:Key="btn">
    <Setter Property="Foreground" Value="#aaa"></Setter>
    <Setter Property="FontSize" Value="15"></Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border BorderThickness="1" Background="Transparent" x:Name="btn1">
                    <!--渐变色-->
                    <Border.BorderBrush>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                            <GradientStop Color="#22ffffff" Offset="0"></GradientStop>
                            <GradientStop Color="#77ffffff" Offset="0.5"></GradientStop>
                            <GradientStop Color="#22ffffff" Offset="1"></GradientStop>
                        </LinearGradientBrush>
                    </Border.BorderBrush>
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
                        <TextBlock Text="{TemplateBinding Tag}" FontFamily="../Resource/Fonts/#iconfont" Margin="0,2,5,0"></TextBlock>
                        <TextBlock Text="{TemplateBinding Content}" VerticalAlignment="Center"></TextBlock>
                    </StackPanel>
                </Border>
                <!--触发器-->
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="btn1" Property="Background" Value="#11ffffff"></Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>