Avalonia 修改CheckBox 合取方塊大小 和 停用 滑鼠移動到 CheckBox 上方時文字顏色變化
Avalonia 修改CheckBox 合取方塊大小 和 停用 滑鼠移動到 CheckBox 上方時文字顏色變化
資料來源: copilot+kimi
DeviceEdit.axaml
<Window xmlns="https://github.com/avaloniaui"
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"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
xmlns:local="clr-namespace:VPOS_Avalonia"
xmlns:vm="using:VPOS_Avalonia.ViewModels"
x:DataType="vm:DeviceEditViewModel"
x:Class="VPOS_Avalonia.DeviceEdit"
Title="VPOS" Loaded="Window_Loaded">
<!--
ViewModels 使用步驟:
▲[固定語法(寫在axaml)] xmlns:vm="using:VPOS_Avalonia.ViewModels"
▲[對應語法(寫在axaml)] x:DataType="vm:DeviceEditViewModel"
▲[對應語法(寫在axaml)] <Design.DataContext>
▲[對應語法(寫在cs)] DataContext = new DeviceEditViewModel();//建構子函數中資源檔載入[InitializeComponent();]前必須指定ViewModel
-->
<Design.DataContext>
<vm:DeviceEditViewModel/>
</Design.DataContext>
<Window.Styles>
<!--修改CheckBox 合取方塊大小-->
<Style Selector="CheckBox">
<Setter Property="FontSize" Value="20" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<StackPanel Orientation="Horizontal">
<Border Name="PART_CheckmarkBorder"
Width="25"
Height="25"
Background="White"
Margin="2">
<Path Name="PART_Checkmark"
Stretch="Uniform"
StrokeThickness="2"
Stroke="Blue"
Data="M0,4 L4,8 8,0"
Opacity="{TemplateBinding IsChecked, Converter={StaticResource BooleanToOpacityConverter}}" />
</Border>
<ContentPresenter Name="PART_ContentPresenter"
Margin="4,0,0,0"
VerticalAlignment="Center"
Content="{TemplateBinding Content}"
Foreground="{TemplateBinding Foreground}"
ContentTemplate="{TemplateBinding ContentTemplate}"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--
https://kimi.moonshot.cn/
如果上述代码仍然不起作用，可能是因为CheckBox的模板中有一些更具体的样式选择器在起作用。你可以尝试直接针对模板中的ContentPresenter设置样式
-->
<Style Selector="CheckBox:pointerover /template/ ContentPresenter">
<Setter Property="Foreground" Value="White"/>
</Style>
</Window.Styles>
<Border BorderBrush="LightBlue" BorderThickness="5" CornerRadius="10" Margin="-3">
<Grid x:Name="FullGrid" RowDefinitions="0.6*,10.4*,1*" ColumnDefinitions="*" >
<Border BorderBrush="Blue" BorderThickness="1" CornerRadius="10" Margin="0" Grid.Row="0" Grid.Column="0">
<Grid x:Name="HeadGrid" RowDefinitions="*" ColumnDefinitions="*">
<TextBlock x:Name="TitleLable" Text="周邊設備編輯" Foreground="White" FontSize="22" Grid.Row="0" Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Center" />
<Button x:Name="CloseBtn" Content="X" Grid.Row="0" Grid.Column="0" FontSize="24" Background="Transparent" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,20,0" Click="CloseBtn_Clicked"/>
</Grid>
<!--HeadGrid End-->
</Border>
<Border BorderBrush="White" BorderThickness="1" CornerRadius="10" Margin="20,20,20,10" Grid.Row="1" Grid.Column="0">
<Grid x:Name="BodyGrid" RowDefinitions="*,*,*,*,*,2*,0.5*" ColumnDefinitions="0.8*,1.6*,0.8*,0.8*" Margin="20,10,20,10">
<TextBlock x:Name="Lab00" Text="設備型號:" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontSize="20" Grid.Row="0" Grid.Column="0"/>
<ComboBox x:Name="Picker01" ItemsSource="{Binding Picker01List}" DisplayMemberBinding="{Binding Picker_Name}" VerticalAlignment="Center" HorizontalAlignment="Stretch" Background="White" FontSize="20" Grid.Row="0" Grid.Column="1" SelectionChanged="Picker01_SelectedIndexChanged"/>
<TextBlock Text="啟用設備:" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontSize="20" Grid.Row="0" Grid.Column="2"/>
<Image x:Name="Img03" Source="avares://VPOS_Avalonia/Assets/switch_off.png" HorizontalAlignment="Left" Grid.Row="0" Grid.Column="3" PointerPressed="img03_Clicked"/>
<TextBlock Text="紙張格式:" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontSize="20" Grid.Row="1" Grid.Column="0"/>
<TextBox x:Name="Txt11" Text="" VerticalAlignment="Center" IsReadOnly="True" Background="White" FontSize="20" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3" Margin="0,8"/>
<!-- <ComboBox x:Name="Picker11" ItemsSource="{Binding Picker11List}" DisplayMemberBinding="{Binding Picker_Name}" VerticalAlignment="Center" HorizontalAlignment="Stretch" Background="White" FontSize="20" Grid.Row="1" Grid.Column="1" /> -->
<TextBlock x:Name="Lab20" Text="連接方式:" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontSize="20" Grid.Row="2" Grid.Column="0"/>
<ComboBox x:Name="Picker21" ItemsSource="{Binding Picker21List}" DisplayMemberBinding="{Binding Picker_Name}" VerticalAlignment="Center" HorizontalAlignment="Stretch" Background="White" FontSize="20" Grid.Row="2" Grid.Column="1" SelectionChanged="Picker21_SelectedIndexChanged"/>
<TextBlock x:Name="Lab22" Text="列印份數:" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontSize="20" Grid.Row="2" Grid.Column="2"/>
<TextBox x:Name="Txt23" Text="" VerticalAlignment="Center" Background="White" FontSize="20" Grid.Row="2" Grid.Column="3" Margin="0,8"/>
<TextBlock x:Name="Lab30" Text="IP:" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontSize="20" Grid.Row="3" Grid.Column="0"/>
<TextBox x:Name="Txt31" IsVisible="True" Text="" VerticalAlignment="Center" Background="White" FontSize="20" Grid.Row="3" Grid.Column="1" Margin="0,8"/>
<ComboBox x:Name="Picker31_0" IsVisible="False" ItemsSource="{Binding Picker31_0List}" DisplayMemberBinding="{Binding Picker_Name}" VerticalAlignment="Center" HorizontalAlignment="Stretch" Background="White" FontSize="20" Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="3"/>
<ComboBox x:Name="Picker31_1" IsVisible="False" ItemsSource="{Binding Picker31_1List}" DisplayMemberBinding="{Binding Picker_Name}" VerticalAlignment="Center" HorizontalAlignment="Stretch" Background="White" FontSize="20" Grid.Row="3" Grid.Column="1" />
<TextBlock x:Name="Lab32" IsVisible="True" Text="Port:" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontSize="20" Grid.Row="3" Grid.Column="2"/>
<TextBox x:Name="Txt33" IsVisible="True" Text="" VerticalAlignment="Center" Background="White" FontSize="20" Grid.Row="3" Grid.Column="3" Margin="0,8"/>
<ComboBox x:Name="Picker33" IsVisible="False" ItemsSource="{Binding Picker33List}" DisplayMemberBinding="{Binding Picker_Name}" VerticalAlignment="Center" HorizontalAlignment="Stretch" Background="White" FontSize="20" Grid.Row="3" Grid.Column="3" />
<TextBlock x:Name="Lab40" Text="底部列印資訊:" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontSize="20" Grid.Row="4" Grid.Column="0"/>
<TextBox x:Name="Txt41" Text="" VerticalAlignment="Center" Background="White" FontSize="20" Grid.Row="4" Grid.Column="1" Grid.ColumnSpan="3" Margin="0,8"/>
<Grid x:Name="BodyGrid50" RowDefinitions="*,*,*,*" ColumnDefinitions="*,*,*" Grid.Row="5" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="4" >
<CheckBox x:Name="Cbx00" Content="核取方塊長度測試" Foreground="White" FontSize="20" Grid.Row="0" Grid.Column="0"/>
<CheckBox x:Name="Cbx01" Content="核取方塊長度測試" Foreground="White" FontSize="20" Grid.Row="0" Grid.Column="1"/>
<CheckBox x:Name="Cbx02" Content="核取方塊長度測試" Foreground="White" FontSize="20" Grid.Row="0" Grid.Column="2"/>
<CheckBox x:Name="Cbx10" Content="核取方塊長度測試" Foreground="White" FontSize="20" Grid.Row="1" Grid.Column="0"/>
<CheckBox x:Name="Cbx11" Content="核取方塊長度測試" Foreground="White" FontSize="20" Grid.Row="1" Grid.Column="1"/>
<CheckBox x:Name="Cbx12" Content="核取方塊長度測試" Foreground="White" FontSize="20" Grid.Row="1" Grid.Column="2"/>
<CheckBox x:Name="Cbx20" Content="核取方塊長度測試" Foreground="White" FontSize="20" Grid.Row="2" Grid.Column="0"/>
<CheckBox x:Name="Cbx21" Content="核取方塊長度測試" Foreground="White" FontSize="20" Grid.Row="2" Grid.Column="1"/>
<CheckBox x:Name="Cbx22" Content="核取方塊長度測試" Foreground="White" FontSize="20" Grid.Row="2" Grid.Column="2"/>
<CheckBox x:Name="Cbx30" Content="核取方塊長度測試" Foreground="White" FontSize="20" Grid.Row="3" Grid.Column="0"/>
<CheckBox x:Name="Cbx31" Content="核取方塊長度測試" Foreground="White" FontSize="20" Grid.Row="3" Grid.Column="1"/>
<CheckBox x:Name="Cbx32" Content="核取方塊長度測試" Foreground="White" FontSize="20" Grid.Row="3" Grid.Column="2"/>
</Grid>
</Grid>
</Border>
<TextBlock Text="設備資訊" FontSize="20" Foreground="White" Background="#194a6e" VerticalAlignment="Top" HorizontalAlignment="Left" Padding="0" Margin="35,5,0,0" Grid.Row="1" Grid.Column="0"/>
<Grid x:Name="FooterGrid" Grid.Row="2" Grid.Column="0" RowDefinitions="*" ColumnDefinitions="3.5*,1*,0.5*,0.5*,1*,3.5*" >
<local:ExtButton x:Name="FooterBtn00" FontSize="22" Background="Orange" Foreground="White" Content="儲 存" Click="FooterBtn00_Clicked" Margin="0,5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Grid.Row="0" Grid.Column="1"/>
<local:ExtButton x:Name="FooterBtn01" FontSize="22" Background="Orange" Foreground="White" Content="離 開" Click="CloseBtn_Clicked" Margin="0,5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Grid.Row="0" Grid.Column="4" />
<Image x:Name="KeyboardBtn" Margin="10,5" Source="avares://VPOS_Avalonia/Assets/keyboard.png" Grid.Row="0" Grid.Column="5" Width="60" VerticalAlignment="Center" HorizontalAlignment="Center" PointerPressed="KeyboardBtn_Clicked"/>
</Grid>
</Grid>
<!--FullGrid End-->
</Border>
</Window>
App.axaml
<Application xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="VPOS_Avalonia.App"
xmlns:local="clr-namespace:VPOS_Avalonia"
RequestedThemeVariant="Default">
<!-- "Default" ThemeVariant follows system theme variant. "Dark" or "Light" are other available options. -->
<Application.Resources>
<local:BooleanToOpacityConverter x:Key="BooleanToOpacityConverter" />
</Application.Resources><!--修改CheckBox 合取方塊大小-->
<Application.Styles>
<FluentTheme />
<!-- https://github.com/AvaloniaUI/Avalonia/discussions/8424 -->
<StyleInclude Source="avares://Avalonia.Controls.DataGrid/Themes/Fluent.xaml"/>
</Application.Styles>
</Application>
BooleanToOpacityConverter.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace VPOS_Avalonia;
using Avalonia.Data.Converters;
using System;
using System.Globalization;
//<!--修改CheckBox 合取方塊大小-->
public class BooleanToOpacityConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value is bool boolean)
{
return boolean ? 1.0 : 0.0;
}
return 0.0;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
One thought on “Avalonia 修改CheckBox 合取方塊大小 和 停用 滑鼠移動到 CheckBox 上方時文字顏色變化”
原始問題01. Avalonia 修改CheckBox 合取方塊大小
原始問題02.我在 Avaloniag 使用 CheckBox 我現在只想要當滑鼠移動到 CheckBox 上時文字顏色不會改變 我要如何實作