如何根据 WPF/XAML 中的 ComboBox 值更改字体大小

Question

我的代码有一些问题，希望您能提供帮助。

我正在尝试学习 WPF/XAML，作为学习过程的一部分，我决定制作一个基本的文本编辑器来测试我自己的技能。我想为字体大小制作一个组合框，它将根据组合框中的值调整所有文本的大小（基本上与任何其他文本编辑器一样，但我不知道如何进行这项工作。这是我的 XAML 目前为止：

<Window x:Class="DataBinding.UsingCommandsSample"
        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:local="clr-namespace:DataBinding"
        mc:Ignorable="d"
        Title="MainWindow" WindowState="Maximized" >
    <DockPanel>

        <Menu  DockPanel.Dock="Top" Margin="0 0 0 10">
            <MenuItem Header="_File" Name="file">
                <MenuItem Header="Open File" Click="btnOpenFile_Click"/>
                <MenuItem Header="Save File" Click="btnSaveFile_Click">
                    <MenuItem Header="Save As" Click="btnSaveAs_Click" />
                </MenuItem>

                <MenuItem Header="Save As" Click="btnSaveAs_Click" />
                <MenuItem Command="Print" />
            </MenuItem>
            <MenuItem Header="_Edit" Name="edit">
                <MenuItem Command="Copy" />
                <MenuItem Command="Cut" />
                <MenuItem Command="Paste" />
                <MenuItem Command="SelectAll" />
                <MenuItem Command="Undo" />
                <MenuItem Command="AlignLeft" />
                <MenuItem Command="EditingCommands.AlignCenter" />
                <MenuItem Command="AlignRight" />
                <MenuItem Command="AlignJustify" />
            </MenuItem>
        </Menu>

        <ToolBarTray DockPanel.Dock="Top" Height="auto">
            <ToolBar>
                <Button Command="Cut" Content="Cut" />
                <Button Command="Copy" Content="Copy"  />
                <Button Command="Paste" Content="Paste" />
                <ComboBox x:Name="fontBox" SelectedValue="selected" SelectionChanged="fontBox_SelectionChanged">
                    <ComboBoxItem Content="12" IsSelected="True"/>
                    <ComboBoxItem Content="16" />
                    <ComboBoxItem Content="18" />
                    <ComboBoxItem Content="20" />
                </ComboBox>
            </ToolBar>

        </ToolBarTray>
        <TextBox Name="txtEditor" AcceptsReturn="True" />
    </DockPanel>
</Window>

这是我的代码隐藏：

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 System.ComponentModel;
using System.Collections.ObjectModel;
using Microsoft.Win32;
using System.IO;

namespace DataBinding
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class UsingCommandsSample : Window
    {
        public UsingCommandsSample()
        {
            InitializeComponent();
        }
        public string path;

        private void btnOpenFile_Click(object sender, RoutedEventArgs e)
        {
            OpenFileDialog openFileDialog = new OpenFileDialog();
            if (openFileDialog.ShowDialog() == true)
                txtEditor.Text = File.ReadAllText(openFileDialog.FileName);
            path = openFileDialog.FileName;
        }

        private void btnSaveFile_Click(object sender, RoutedEventArgs e)
        {
            if (path != null)
                File.WriteAllText(path, txtEditor.Text);
            else
                MessageBox.Show("You have not specified a location to which the file should be saved. Click 'OK' then File >> Save As.", "Cannot find path", MessageBoxButton.OK, MessageBoxImage.Warning);       
        }



        private void btnSaveAs_Click(object sender, RoutedEventArgs e)
        {
            SaveFileDialog saveFileDialog = new SaveFileDialog();
            saveFileDialog.Filter = "Text file (*.txt)|*txt | Banana (*.banana)|*.cs";
            if (saveFileDialog.ShowDialog() == true)
                File.WriteAllText(saveFileDialog.FileName, txtEditor.Text);
        }

        private void fontBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            int temp;
            if (Int32.TryParse(fontBox.Text, out temp))
            {
                txtEditor.FontSize = temp;
            }
        }
    }
}

出于某种原因，字体大小确实会更新，但只有在我 select 一个不同的 ComboBoxItem 之后。例如，如果我以“12”开头 selected，然后 select“14”，什么都不会发生。如果我然后 select“16”，字体大小将更改为 14。我想这些操作是按照我不希望的顺序进行的，但我不知道为什么或如何解决这个问题.

如果有人能帮助我解决这个问题，我将不胜感激。我似乎找不到任何其他资源，所以 Whosebug 是我最后的希望。

Answer 1

问题是，当事件触发表明组合已更改时，它实际上尚未完成更改，因此您获得的是现有值 (12) 而不是新值 (14)。下次你会得到 14 而不是新选择的 16，这就是你总是落后一步的原因。

我会绑定组合框，而不是像您那样做，但这里有一个快速的'n'dirty 解决方案。

    private void fontBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        ComboBox cbox = (ComboBox)sender;
        ComboBoxItem t = (ComboBoxItem) cbox.SelectedItem;
        string NewSetting = (string) t.Content;            

        int temp;
        if (Int32.TryParse(NewSetting, out temp))
        {
            if(txtEditor != null)
                txtEditor.FontSize = temp;
        }
    }

您需要检查 txtEditor 是否为空，因为当页面第一次加载时，组合框将在初始化时触发此事件，这是在 txtEditor 初始化之前。

Answer 2

这是一个简单的场景：

<Window x:Class="TestComboFont.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:local="clr-namespace:TestComboFont"
    xmlns:vm="clr-namespace:TestComboFont.ViewModels"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
    <vm:MainViewModel/>
</Window.DataContext>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="10*"/>
    </Grid.RowDefinitions>
    <ComboBox x:Name="fontsCombo"
              ItemsSource="{Binding FontSizes}"
              SelectedItem="{Binding SelectedFont, UpdateSourceTrigger=PropertyChanged}"
              Margin="10,5"/>
    <TextBox Grid.Row="1"
             Background="WhiteSmoke"
             Margin="10"
             AcceptsReturn="True" 
             FontSize="{Binding SelectedFont, UpdateSourceTrigger=PropertyChanged}"/>
</Grid>

瞧，视图模型：

public class MainViewModel : INotifyPropertyChanged
{
    public ObservableCollection<int> FontSizes { get; set; }

    private int _selectedFont;

    public int SelectedFont
    {
        get { return _selectedFont; }
        set
        {
            _selectedFont = value;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(SelectedFont)));
        }
    }

    public MainViewModel()
    {
        FontSizes = new ObservableCollection<int>() { 10, 15, 20 };
    }

    public event PropertyChangedEventHandler PropertyChanged = delegate { };
}

就是这样。

您的 ComboBox 绑定到位于 MainViewModel.

中的 FontSizes ObservableCollection

为了获得此行为，您的 Window:

需要一个 DataContext

<Window.DataContext>
   <vm:MainViewModel/>
</Window.DataContext>

每次你 select 一个项目时，SelectedFont 就会改变，TextBox 的 FontSize 属性也会随之改变，因为在转过来你在这里设置了绑定：

FontSize="{Binding SelectedFont, UpdateSourceTrigger=PropertyChanged}"

我认为，即使在此示例中没有模型，也可以使用 MVVM，这可能是一个不错的选择。

如何根据 WPF/XAML 中的 ComboBox 值更改字体大小

How to change font size according to ComboBox value in WPF/XAML

c#

wpf

xaml

combobox

font-size