Как изменить размер шрифта в соответствии со значением ComboBox в WPF / XAML

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

По какой-то причине размер шрифта действительно обновляется, но только после того, как я выбрал другой ComboBoxItem. Например, еслиЯ начинаю с выбора «12», затем выбираю «14», ничего не произойдет. Если я затем выберу «16», размер шрифта изменится на 14. Я представляю, что операции происходят в том порядке, в котором они мне не нужнык, но я озадачен, почему или как это исправить.

Если бы кто-нибудь мог мне помочь в этом, я был бы очень признателен. Кажется, я не могу найти какие-либо другие ресурсы, поэтомуStackOverflow - моя последняя надежда.

Answer 1

Вот простой сценарий:

<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 связан с FontSizes ObservableCollection, который находится в MainViewModel.

Чтобы получить такое поведение, вам необходим DataContext для вашего Window:

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

Каждый раз, когда вы выбираете элемент, SelectedFont будет изменяться, а вместе с ним и свойство FontSize TextBox, потому что в свою очередь у вас есть набор привязок:

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

Я думаю, что это хороший вариант для подражания, используя MVVM, даже если в этом примере нет модели.

Answer 2

Проблема в том, что когда событие запускается, чтобы сообщить, что комбо изменилось, оно еще не закончило изменение, поэтому вы получаете существующее значение (12), а не новое значение (14).В следующий раз вы получите 14 вместо вновь выбранных 16, поэтому вы всегда на шаг позади.

Я бы связал поле со списком вместо того, чтобы делать это так, как вы, но вот быстрое и грязное решение.

    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значение null, поскольку при первой загрузке страницы поле со списком будет запускать это событие во время его инициализации, то есть до инициализации txtEditor.