Bài viết

Kho tài liệu và bài viết được chia sẻ, đánh giá bởi cộng đồng

Custom ControlBar trong WPF

Vo Tan Duc đã tạo 18:46 26-05-2023 799 lượt xem 0 bình luận

Nội dung bài viết

Bỏ ControlBar mặc định trong WPF

Thêm 2 dòng này vào MainWindow.xaml

ResizeMode="CanResizeWithGrip"
WindowStyle="None"

Tạo ControlBar

Tạo UserControl

Tạo 1 folder chứa UserControl, trong folder đó tạo 1 file UserControl tên là ControlBarUC.xaml

ControlBarUC.xaml

<UserControl x:Class="PCAutoControlOtherApp.DucUserControl.ControlBarUC"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:PCAutoControlOtherApp.DucUserControl"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
             mc:Ignorable="d" 
             x:Name="ucControlBar"
             >
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="MouseLeftButtonDown">
            <i:InvokeCommandAction Command="{Binding MouseLeftButtonDownCommand}" CommandParameter="{Binding ElementName=ucControlBar}"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>
    <Grid>
        <materialDesign:ColorZone Mode="PrimaryLight" >
            <DockPanel>
                <StackPanel DockPanel.Dock="Right"  Background="Transparent" Orientation="Horizontal">
                    <StackPanel.Resources>
                        <Style TargetType="Button">
                            <Setter Property="Margin" Value="2 4 2 4"></Setter>
                            <Setter Property="Width" Value="40"></Setter>
                        </Style>
                    </StackPanel.Resources>
                    <Button Command="{Binding MinimizeWindowCommand}" 
                            CommandParameter="{Binding ElementName=ucControlBar}"
                        ToolTip="Thu nhỏ" ToolBar.OverflowMode="AsNeeded" Background="ForestGreen">
                        <materialDesign:PackIcon Kind="WindowMinimize" />
                    </Button>
                    <Button Command="{Binding MaximizeWindowCommand}" 
                            CommandParameter="{Binding ElementName=ucControlBar}"
                        ToolTip="Phóng to" ToolBar.OverflowMode="AsNeeded" Background="ForestGreen">
                        <materialDesign:PackIcon Kind="WindowMaximize" />
                    </Button>
                    <Button Command="{Binding CloseWindowCommand}" 
                            CommandParameter="{Binding ElementName=ucControlBar}"
                            ToolTip="Đóng" ToolBar.OverflowMode="AsNeeded" Background="OrangeRed">
                        <materialDesign:PackIcon Kind="WindowClose" />
                    </Button>
                </StackPanel>

                <StackPanel DockPanel.Dock="Left" Orientation="Horizontal">
                    <ToggleButton Style="{DynamicResource MaterialDesignHamburgerToggleButton}" />
                    <TextBlock VerticalAlignment="Center" Margin="16 0 0 0" Text="{Binding Tag, ElementName=ucControlBar}"></TextBlock>
                </StackPanel>
            </DockPanel>
        </materialDesign:ColorZone>
    </Grid>
</UserControl>

Sử dụng ControlBar vừa tạo

Tạo 1 project hoặc folder View Model, trong ViewModel, tạo 1 class ControlBarViewModel

Class ControlBarViewModel.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;

namespace ViewModel
{
    public class ControlBarViewModel
    {
        public ControlBarViewModel()
        {
            CloseWindowCommand = new RelayCommand<UserControl>((p) => { return p == null ? false : true; }, (p) =>
            {
                FrameworkElement window = GetWindowParent(p);
                var w=window as Window;
                if (w != null) 
                {
                    w.Close();
                }
            });
            MaximizeWindowCommand = new RelayCommand<UserControl>((p) => { return p == null ? false : true; }, (p) =>
            {
                FrameworkElement window = GetWindowParent(p);
                var w = window as Window;
                if (w != null)
                {
                    if(w.WindowState!=WindowState.Maximized)
                    {
                        w.WindowState = WindowState.Maximized;
                    }
                    else
                    {
                        w.WindowState=WindowState.Normal;
                    }
                }
            });
            MinimizeWindowCommand = new RelayCommand<UserControl>((p) => { return p == null ? false : true; }, (p) =>
            {
                FrameworkElement window = GetWindowParent(p);
                var w = window as Window;
                if (w != null)
                {
                    if (w.WindowState != WindowState.Minimized)
                    {
                        w.WindowState = WindowState.Minimized;
                    }
                    else
                    {
                        w.WindowState = WindowState.Maximized;
                    }
                }
            });
            MouseLeftButtonDownCommand = new RelayCommand<UserControl>((p) => { return p == null ? false : true; }, (p) =>
            {
                FrameworkElement window = GetWindowParent(p);
                var w = window as Window;
                if (w != null)
                {
                    w.DragMove();
                }
            });
        }
        public ICommand CloseWindowCommand { get; set; }
        public ICommand MaximizeWindowCommand { get; set; }
        public ICommand MinimizeWindowCommand { get;set; }
        public ICommand MouseLeftButtonDownCommand { get; set; }
        FrameworkElement GetWindowParent(UserControl p)
        {
            FrameworkElement parent = p;
            while(parent.Parent != null)
            {
                parent = parent.Parent as FrameworkElement;
            }
            return parent;
        }
    }
}

Dưới code behind của ControlBarUC.xaml

class ControlBarUC.xaml.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using ViewModel;
namespace PCAutoControlOtherApp.DucUserControl
{
    /// <summary>
    /// Interaction logic for ControlBarUC.xaml
    /// </summary>
    public partial class ControlBarUC : UserControl
    {
        public ControlBarViewModel ViewModel { get; set; }
        public ControlBarUC()
        {
            InitializeComponent();
            this.DataContext = ViewModel = new ControlBarViewModel();
        }
    }
}

Quay lại MainWindow.xaml, thêm code này vào để tạo 1 biến tham chiếu đến UserControl

xmlns:UserControl="clr-namespace:PCAutoControlOtherApp.DucUserControl"

Sửa tiêu đề ControlBar

Thêm code này vào MainWindow.xaml

<UserControl:ControlBarUC Tag="{Binding Title, ElementName= <!--Name của window--!>}"></UserControl:ControlBarUC>

Tóm code lại

MainWindow.xaml

<Window x:Class="PCAutoControlOtherApp.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:ViewModel="clr-namespace:ViewModel;assembly=ViewModel"
        xmlns:local="clr-namespace:PCAutoControlOtherApp"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        xmlns:UserControl="clr-namespace:PCAutoControlOtherApp.DucUserControl"
        WindowStartupLocation="CenterScreen"
        ResizeMode="CanResizeWithGrip"
        WindowStyle="None"
        mc:Ignorable="d"
        x:Name="Window"
        Title="MainWindow" Height="600" Width="1000">
    <Window.DataContext>
        <ViewModel:AutoViewModel></ViewModel:AutoViewModel>
    </Window.DataContext>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <UserControl:ControlBarUC Grid.Row="0" Tag="{Binding Title, ElementName=Window}"></UserControl:ControlBarUC>
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto"></ColumnDefinition>
                <ColumnDefinition Width="auto"></ColumnDefinition>
                <ColumnDefinition Width="auto"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"></RowDefinition>
                    <RowDefinition Height="auto"></RowDefinition>
                    <RowDefinition Height="auto"></RowDefinition>
                </Grid.RowDefinitions>
                <TextBox Margin="20 20 0 0" Text="{Binding NameApp, UpdateSourceTrigger=PropertyChanged}" materialDesign:HintAssist.Hint="Tên tiêu đề ứng dụng"></TextBox>
                <Button Margin="20 20 0 0" Grid.Row="1" Background="YellowGreen" x:Name="SendKeyToApp" Content="Gửi phím cho ứng dụng" Command="{Binding SendKeyToAppCommand}"></Button>
                <Button Margin="20 20 0 0" Grid.Row="2" Background="RosyBrown" x:Name="SendMultiKeyToApp" Content="Gửi tổ hợp phím cho ứng dụng" Command="{Binding SendMultiKeyToAppCommand}"></Button>
            </Grid>
            <Grid Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"></RowDefinition>
                    <RowDefinition Height="auto"></RowDefinition>
                    <RowDefinition Height="auto"></RowDefinition>
                    <RowDefinition Height="auto"></RowDefinition>
                </Grid.RowDefinitions>
                <TextBlock Margin="20 20 0 0" Text="SỬA TIÊU ĐỀ CỦA ỨNG DỤNG"></TextBlock>
                <TextBox Grid.Row="1" Margin="20 20 0 0" Text="{Binding NameApp, UpdateSourceTrigger=PropertyChanged}" materialDesign:HintAssist.Hint="Tên tiêu đề ứng dụng"></TextBox>
                <TextBox Grid.Row="2" Margin="20 20 0 0" Text="{Binding NameAppChanged, UpdateSourceTrigger=PropertyChanged}" materialDesign:HintAssist.Hint="Tên tiêu đề ứng dụng muốn thay đổi"></TextBox>
                <Button Grid.Row="3" Margin="20 20 0 0" Background="Coral" x:Name="EditTitleApp" Content="Sửa tiêu đề của ứng dụng" Command="{Binding EditTileAppCommand}"></Button>
            </Grid>
            <Grid Grid.Column="2">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"></RowDefinition>
                    <RowDefinition Height="auto"></RowDefinition>
                    <RowDefinition Height="auto"></RowDefinition>
                </Grid.RowDefinitions>
                <TextBlock Margin="20 0 0 0" Text="CLICK VÀO CONTROL CỦA ỨNG DỤNG KHÔNG CHIẾM CHUỘT"></TextBlock>
                <TextBox Grid.Row="1" Text="{Binding NameCaptionAppSpy, UpdateSourceTrigger=PropertyChanged}" Margin="20 20 0 0" materialDesign:HintAssist.Hint="Tên class và text của ứng dụng"></TextBox>
                <Button Grid.Row="2" Command="{Binding ClickToControlAppCommand}" Content="Click vào control của ứng dụng không chiếm chuột" Margin="20 20 0 0"></Button>
            </Grid>
        </Grid>
    </Grid>
</Window>

 

Nội dung bài viết

Bình luận

Để bình luận, bạn cần đăng nhập bằng tài khoản Howkteam.

Đăng nhập

Câu hỏi mới nhất