Как разместить редактируемый текст в текстовом абзаце в WPF

Question

То, что я пытаюсь достичь, довольно просто в веб-приложениях, но я изо всех сил старался сделать это в WPF.

Я хочу загрузить абзац текста в WPF и заменить некоторые его конкретные слова редактируемыми текстовыми полями. Как я могу это сделать?

Какова наилучшая стратегия для получения этого в правильном порядке?

Update:

Рассмотрим следующий текст. Я хочу отобразить его в WPF, а вместо смелых слов поставить некоторые текстовые поля.

Вы знаете кого-то богатого и знаменитого? Является ли он уверенным, популярным и радостным всем от время-образцом от мейнстрим успеха? Или, на с другой стороны, подчеркнул он, размышляя о своих жизненных вариантах и ​​не зная о значении от его жизни?

Answer 1

WPF и XAML, в отличие от HTML, все о данные.

Лучший способ думать и рассуждать о любом пользовательском интерфейсе на основе XAML - это думать об данных, с которыми вам нужно показать и взаимодействовать.

В этом случае:

public class Word 
{ 
    public string Value { get; set; } 

    public bool IsEditable { get; set; } 
} 

будет представлять каждый из наших слов. Тогда вам просто нужен список этих:

public class ViewModel 
{ 
    public List<Word> Words { get; private set; } 

    public ViewModel() 
    { 
     var editableWords = new[] { "on", "of" }; 

     var text = "Do you know someone rich and famous? Is he confident, popular, and joyful all of the time—the epitome of mainstream success? Or, on the other hand, is he stressed, having second thoughts about his life choices, and unsure about the meaning of his life?"; 

     this.Words = 
      text.Split(' ') 
       .Select(x => new Word 
       { 
        Value = x, 
        IsEditable = editableWords.Contains(x.ToLower()) 
       }) 
       .ToList(); 
    } 
} 

Обратите внимание, как я превращаюсь текст в List<Word> и настройки IsEditable, где это необходимо.

Теперь это просто вопрос, используя ItemsControl, чтобы показать эти:

<Window x:Class="WpfApplication1.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:WpfApplication1" 
     mc:Ignorable="d" 
     Title="MainWindow" Height="350" Width="525"> 
    <Window.Resources> 
     <BooleanToVisibilityConverter x:Key="BoolToVis"/> 
    </Window.Resources> 
    <ItemsControl ItemsSource="{Binding Words}"> 
     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <WrapPanel/> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 

     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <Grid Margin="5,2,5,2"> 
        <TextBlock Text="{Binding Value}" 
           VerticalAlignment="Center"/> 
        <TextBox Text="{Binding Value}" 
          Visibility="{Binding IsEditable, Converter={StaticResource BoolToVis}}"/> 
       </Grid> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
    </ItemsControl> 
</Window> 

Наконец, установите DataContext к экземпляру нашей ViewModel:

public partial class MainWindow : Window 
{ 
    public MainWindow() 
    { 
     InitializeComponent(); 

     DataContext = new ViewModel(); 
    } 
} 

Результат:

Обратите внимание, что я вообще не «касаюсь» пользовательского интерфейса в коде, это просто простые, простые свойства и DataBinding.