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
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