zoukankan      html  css  js  c++  java
  • Wpf 简单制作自己的窗体样式(2)

    上一篇blog讲了制作简单的样式的窗体,对于一个传统的窗体,不仅仅可以拖动,和关闭操作、还具有最大化、最小化、隐藏,以及改变窗体的大小等。这篇blog就是对上篇的补充,完善窗体的改变大小和最大化最小化的功能。

    1.改变形状窗体的尺寸
       实现的效果:在窗体的右下角,当鼠标划过时,改为可以拉动的鼠标样式,根据鼠标拖动的位置,修改窗体的大小。
    上篇降到窗体分成两部分,head和content,在这里做一下修改,再增加一行footer,设置高度为5,用于放置一个元素,位置在右下侧,用于截获鼠标事件。
    代码如下:
       <Grid Grid.Row="2" Background="White">
                    <Border Height="5" Width="5" Background="White" CornerRadius="500,0,0,0" VerticalAlignment="Bottom" HorizontalAlignment="Right" Cursor="SizeNWSE" MouseLeftButtonDown="Border_MouseLeftButtonDown" MouseLeftButtonUp="Border_MouseLeftButtonUp" MouseMove="Border_MouseMove">
                      
                    </Border>
              
                </Grid>
    其中Border就是用来专门截获鼠标事件的,当鼠标放置在此元素上时,鼠标状态改为可以拖动大小的图标。
    在此元素上添加三个事件,鼠标左键按下,释放,和移动。
    代码:
     //拖动改变窗体大小
            bool isWiden = false;
            private void Border_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            {
                isWiden = true;
            }
     
            private void Border_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
            {
                isWiden = false;
                Border b = (Border)sender;
                b.ReleaseMouseCapture();
            }
     
            private void Border_MouseMove(object sender, MouseEventArgs e)
            {
                Border b = (Border)sender;
                if (isWiden)
                {
                    b.CaptureMouse();
                    double newWidth = e.GetPosition(this).X + 5;
                    double newheight = e.GetPosition(this).Y + 5;
                    if (newWidth > 0)
                    {
                        this.Width = newWidth;
     
                    }
                    if (newheight > 0)
                    {
                        this.Height = newheight;
                    }
                }
     
     
            }
    ok !修改窗体尺寸就实现了。
     
    2.最大化、最小化
     
    最小化的实现可以直接修改窗体的WindowState=WindowState.Minimized;
    如果直接修改窗体的WindowState=WindowState.Maximized;确实实现了窗体的最大化,但是存在一个问题,就是窗体的WindowStyle="None"的情况下,上面方式实现的最大化会覆盖系统的任务栏。
    那就采用另一种简单的方式,根据活动区域的大小来设置窗体的高和宽,实现最大化的效果。
    具体代码如下:
                   Rect rc = SystemParameters.WorkArea;//获取工作区大小
                   this.Left = 0;//设置位置
                    this.Top = 0;
     
                    this.Width = rc.Width;
                    this.Height = rc.Height;
    再次点击最大化按钮就会还原到窗体原来的大小和位置,在实现最大化之前需要纪录窗体当前的位置和大小。以便进行还原。
    代码如下: 
    rcnormal = new Rect(this.Left, this.Top, this.Width, this.Height);//保存下当前位置与大小
     this.Left = rcnormal.Left;
                    this.Top = rcnormal.Top;
                    this.Width = rcnormal.Width;
                    this.Height = rcnormal.Height;
    ok,到这里一个窗体基本有的功能都实现了。我在这里写下的只是一种实现方式,还有很多种可以去尝试。(参考WPF编程宝典(2010))
     
    工程就不打包了,代码贴下:
    XAML:
    <Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="WpfAppBlog.MainWindow"
        x:Name="Window" Background="Transparent" MinWidth="640" MinHeight="480" 
        Title="MainWindow" AllowsTransparency="True" WindowStyle="None"
        >
        <Window.Resources>
            <Style x:Key="myBtnStyle" TargetType="{x:Type Button}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition x:Name="columnDefinition1" Width="0.982*"/>
                                    <ColumnDefinition x:Name="columnDefinition" Width="0.018*"/>
                                </Grid.ColumnDefinitions>
                                <Rectangle x:Name="rectangle" RadiusY="2" RadiusX="2" Stroke="{x:Null}" Fill="#FF0DAD5F" Grid.ColumnSpan="2"/>
                                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsFocused" Value="True">
                                    <Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/>
                                    <Setter Property="Fill" TargetName="rectangle" Value="#FF0DAD5F"/>
                                </Trigger>
                                <Trigger Property="IsDefaulted" Value="True">
                                    <Setter Property="Fill" TargetName="rectangle" Value="#FF0DAD5F"/>
                                    <Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/>
                                </Trigger>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/>
                                    <Setter Property="Fill" TargetName="rectangle" Value="#FF83D245"/>
                                </Trigger>
                                <Trigger Property="IsPressed" Value="True">
                                    <Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/>
                                    <Setter Property="Fill" TargetName="rectangle" Value="#FF17D256"/>
                                    <Setter Property="Width" TargetName="columnDefinition" Value="Auto"/>
                                    <Setter Property="MinWidth" TargetName="columnDefinition" Value="0"/>
                                    <Setter Property="Width" TargetName="columnDefinition1" Value="*"/>
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="False">
                                    <Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/>
                                    <Setter Property="Fill" TargetName="rectangle" Value="{x:Null}"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Window.Resources>
        <Border BorderBrush="#FF0DAD5F"  BorderThickness="3" CornerRadius="4">
            <Grid >
                <Grid.RowDefinitions>
                    <RowDefinition Height="30"></RowDefinition>
                    <RowDefinition></RowDefinition>
                    <RowDefinition Height="5"></RowDefinition>
                </Grid.RowDefinitions>
            <Border Background="#FF0DAD5F" BorderBrush="Transparent" MouseDown="Grid_MouseDown" CornerRadius="2,2,0,0">
                <Grid Name="Title" Margin="0">
                    <TextBlock HorizontalAlignment="Left" VerticalAlignment="Center"> My window</TextBlock>
                        <Button Content="一" Name="btnMin" Click="btnMin_Click" HorizontalAlignment="Right" Foreground="White" Margin="0,0,45,0" Height="20" Width="20" Style="{DynamicResource myBtnStyle}" VerticalAlignment="Center" />
                        <Button Content="口" Name="btnMaxOrMin" Click="btnMaxOrMin_Click" HorizontalAlignment="Right" Foreground="White" Margin="0,0,25,0" Height="20" Width="20" Style="{DynamicResource myBtnStyle}" VerticalAlignment="Center"  />
                        <Button Content="X" HorizontalAlignment="Right" Foreground="White" Margin="0,0,5,0" Height="20" Width="20" Style="{DynamicResource myBtnStyle}" VerticalAlignment="Center" Click="Button_Click" />
                </Grid>
                </Border>
                <Grid Grid.Row="1" Background="White" >
                   
                        <Button Content="Button" Height="36" Width="120" Margin="130,127,209,0" Style="{DynamicResource myBtnStyle}" VerticalAlignment="Top"/>
    
                </Grid>
    
                <Grid Grid.Row="2" Background="White">
                    <Border Height="5" Width="5" Background="White" CornerRadius="500,0,0,0" VerticalAlignment="Bottom" HorizontalAlignment="Right" Cursor="SizeNWSE" MouseLeftButtonDown="Border_MouseLeftButtonDown" MouseLeftButtonUp="Border_MouseLeftButtonUp" MouseMove="Border_MouseMove">
                      
                    </Border>
              
                </Grid>
            </Grid>
    
        </Border>
    </Window>
    View Code

    后台:

     
    /// <summary>
        /// MainWindow.xaml 的交互逻辑
        /// </summary>
        public partial class MainWindow : Window
        {
            public MainWindow()
            {
                this.InitializeComponent();
    
                // 在此点下面插入创建对象所需的代码。
            }
    
            private void Button_Click(object sender, RoutedEventArgs e)
            {
                this.Close();
            }
    
            private void Grid_MouseDown(object sender, MouseButtonEventArgs e)
            {
                if (e.LeftButton == MouseButtonState.Pressed)
                {
                    DragMove();
                }
            }
    
            //拖动改变窗体大小
            bool isWiden = false;
            Rect rcnormal;//定义一个全局rect记录还原状态下窗口的位置和大小。
    
            private void Border_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            {
                isWiden = true;
            }
    
            private void Border_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
            {
                isWiden = false;
                Border b = (Border)sender;
                b.ReleaseMouseCapture();
            }
    
            private void Border_MouseMove(object sender, MouseEventArgs e)
            {
                Border b = (Border)sender;
                if (isWiden)
                {
                    b.CaptureMouse();
                    double newWidth = e.GetPosition(this).X + 5;
                    double newheight = e.GetPosition(this).Y + 5;
                    if (newWidth > 0)
                    {
                        this.Width = newWidth;
    
                    }
                    if (newheight > 0)
                    {
                        this.Height = newheight;
                    }
                }
    
    
            }
    
            private void btnMin_Click(object sender, RoutedEventArgs e)
            {
                this.WindowState = WindowState.Minimized;
            }
    
            private void btnMaxOrMin_Click(object sender, RoutedEventArgs e)
            {
                Rect rc = SystemParameters.WorkArea;//获取工作区大小
                if (this.Width == rc.Width)
                {
                    this.Left = rcnormal.Left;
                    this.Top = rcnormal.Top;
                    this.Width = rcnormal.Width;
                    this.Height = rcnormal.Height;
                }
                else
                {
                    rcnormal = new Rect(this.Left, this.Top, this.Width, this.Height);//保存下当前位置与大小
                    this.Left = 0;//设置位置
                    this.Top = 0;
    
                    this.Width = rc.Width;
                    this.Height = rc.Height;
                }
            }
        }
    View Code
     效果图:(鼠标放置在右下角,修改窗体尺寸)
     
     
  • 相关阅读:
    django 开发Broken pipe from ('127.0.0.1', 58078)问题解决
    cocos2d-js中jsc逆向为js攻略
    ECshop 怎样修改商品详细页的“浏览次数”
    ecshop 加广告出现广告位的宽度值必须在1到1024之间
    Nginx 301重定向的配置
    ECSHOP安装百度编辑UEditor教程
    Ecshop商品详情页显示当前会员等级价格
    ECSHOP始终显示全部分类方法
    vps主机修改系统远程端口号/添加防火墙
    ecshop利用.htaccess实现301重定向的方法
  • 原文地址:https://www.cnblogs.com/alsbingo/p/3307959.html
Copyright © 2011-2022 走看看