基于C#WPF和OpencvSharp开发的图像处理系统——1.简介与布局

基本框架：.Net 8.0 ，WPF ，OpencvSharp4需要安装以下包，直接在Nuget下载安装即可

项目界面预览：

目前已经实现界面上的功能，还有一部分正在边学边开发。大部分都是用命令实现的，只有少部分固定的按钮是直接绑定点击事件的。

布局，主窗体隐藏标题栏

    <WindowChrome.WindowChrome>
        <WindowChrome GlassFrameThickness="0" />
    </WindowChrome.WindowChrome>

在界面上添加个Grid 定义三行；

设置Grid的背景颜色

<Grid.Background>
            <RadialGradientBrush>
                <GradientStop Offset="0" Color="#ff285173" />
                <GradientStop Offset="0.5" Color="#244967" />
                <GradientStop Offset="1" Color="#ff14273a" />
            </RadialGradientBrush>
   </Grid.Background>

第一行 标题栏

在内再添加一个Grid，定义三列，第一列为图标放一个Image就行，第二列为一个TextBlock，第三列放一个StackPanel，用来放标题栏的按钮，最小最大以及关闭按钮。 标题栏按钮的style为下

<Style x:Key="TitleBtnStyle" TargetType="Button">
      <Setter Property="Width" Value="40" />
      <Setter Property="Background" Value="#11ffffff" />
      <Setter Property="Foreground" Value="White" />
      <Setter Property="FontFamily" Value="../Resource/Fonts/#iconfont" />
      <Setter Property="Template">
          <Setter.Value>
              <ControlTemplate TargetType="Button">
                  <Grid Background="{TemplateBinding Background}">
                      <Border x:Name="btnBorder">
                          <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                      </Border>
                  </Grid>
                  <ControlTemplate.Triggers>
                      <Trigger Property="IsMouseOver" Value="True">
                          <Setter TargetName="btnBorder" Property="Background" Value="#33ffffff" />
                      </Trigger>
                      <Trigger Property="IsMouseOver" Value="False">
                          <Setter TargetName="btnBorder" Property="Background" Value="Transparent" />
                      </Trigger>
                  </ControlTemplate.Triggers>
              </ControlTemplate>
          </Setter.Value>
      </Setter>
  </Style>

注意按钮的图标是设置FontFamily和 Content，需要将对应的.ttf文件添加进项目，去阿里巴巴iconfont下载即可。 如最小按按钮：

<Button
            x:Name="minBtn"
            Content="&#xe624;"
            Style="{StaticResource TitleBtnStyle}"
            Click="minBtn_Click" />

由于这几个按钮的点击功能是固定，就直接写的Click事件。

第二行 主界面

内部是一个Grid，两列。多页面切换采用的是显示不同的用户控件，没有采用Page。 第一列采用的是Radiobutton，用来切换不同的用户控件，第二列则是放置一个ContentPresenter用来显示不同的控件。 Radiobutton的样式

<Style x:Key="MenuBtnStyle" TargetType="RadioButton">
     <Setter Property="Background" Value="Transparent" />
     <Setter Property="Foreground" Value="White" />
     <Setter Property="Height" Value="50" />
     <Setter Property="FontSize" Value="20" />
     <Setter Property="Template">
         <Setter.Value>
             <ControlTemplate TargetType="RadioButton">
                 <Border Height="{TemplateBinding Height}" Background="{TemplateBinding Background}">
                     <ContentPresenter Margin="10,0" HorizontalAlignment="Center" VerticalAlignment="Center" />
                 </Border>
             </ControlTemplate>
         </Setter.Value>
     </Setter>
     <Style.Triggers>
         <Trigger Property="IsChecked" Value="True">
             <Setter Property="Background" Value="#18aabd" />
             <Setter Property="Foreground" Value="White" />
         </Trigger>
     </Style.Triggers>
 </Style>

具体的多页面切换实现后续在专门介绍。

第三行 底部栏

底部栏就一个两列Grid，第一列用Border来实现网格线，第二列就是一个TextBlock 具体的Border

<Border Grid.Column="0" BorderThickness="0,1,0,0" BorderBrush="#5518aabd">
        <Border.Background>
            <VisualBrush TileMode="FlipXY" Viewport="0,0,7,7" ViewportUnits="Absolute">
                <VisualBrush.Visual>
                    <Line
                        X1="0"
                        Y1="10"
                        X2="10"
                        Y2="0"
                        Stroke="Gray"
                        StrokeThickness="1">
                    </Line>
                </VisualBrush.Visual>
            </VisualBrush>
        </Border.Background>
    </Border>

注意划线坐标即可。

以上就是该项目的大致布局。