2

我可能正在处理这一切都是错误的，所以如果您有其他建议，请告诉我。

我正在为 Windows RT 制作一个应用程序，它将向用户显示一堆文本块，例如字符统计信息。用户将看到：

力量：10
缺点：10
敏捷：10

等等。

我希望他们能够填写这些，然后根据结果计算选择视图值。

我的想法是单击顶部的“编辑”按钮并在每个可编辑文本块上切换一些文本框。

当尝试使用“Blend for Visual Studio”进行设置时，我似乎无法制作小于 49x34 的文本框（比我的文本块大得多）。

我打算找到一种方法来在按钮单击时为每个文本块（使用它的尺寸）生成一个文本框，但是由于它们总是相同的并且会有很多我试图通过混合使它们成为静态.

我对 XAML 很陌生，我似乎找不到一个很好的例子来设置这样的可编辑字段，那么我应该如何让一堆静态字段具有可编辑的文本框？

4

5 回答 5

7

我将在 XAML 中创建 TextBox 和 TextBlock 叠加层，并将它们直接放在网格中，使用水平和垂直对齐到“中心”以确保文本始终完全对齐。我还会使用静态宽度来确保列排列良好。

从那里，您可以直接将 Visibility 绑定到某个布尔“IsEditing”属性，以确保一次只显示一个控件。

<StackPanel Orientation="Horizontal">
    <TextBlock Text="Str: " Width="40" VerticalAlignment="Center" />
    <Grid Width="40" VerticalAlignment="Center">
        <TextBlock Text="{Binding Strength}" 
            Visibility="{Binding IsEditing, Converter={StaticResource BooleanToInvisibilityConverter}}"
            VerticalAlignment="Center" 
            HorizontalAlignment="Center" />
        <TextBox Text="{Binding Strength}" 
            Visibility="{Binding IsEditing, Converter={StaticResource BooleanToVisibilityConverter}}"
            VerticalAlignment="Center" 
            HorizontalContentAlignment="Center" />
    </Grid>
</StackPanel>

在此过程中，您必须定义“BooleanToVisibility”和“BooleanToInvisiblity”转换器资源。我喜欢Diedrik Krols 的这个实现。它既好又简单，可以选择反转。

于 2012-12-24T17:26:21.157 回答
5

您可能希望为 TextBox 使用一种样式，该样式会根据“IsReadOnly”属性是否为真而改变。

当 IsReadOnly 为 true 时，您可以将 BorderBrush 和 Background 设置为透明，从而使其看起来像一个普通的文本块。

这样，您就不必叠加 TextBlocks 和 TextBoxes；只需单独使用 TextBox 控件，并在单击“编辑”按钮时切换“IsReadOnly”属性。

在您的资源中：

<Style x:Key="MyEditableField" TargetType={x:Type TextBox}>
    <Style.Triggers>
        <DataTrigger Binding="{Binding IsReadOnly, RelativeSource={RelativeSource Self}}" Value="True">
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="Background" Value="Transparent" />
        </DataTrigger>
    </Style.Triggers>
</Style>

这是您的可编辑字段之一：

<StackPanel Orientation="Horizontal">
    <TextBlock Text="Str: " />
    <TextBox Style="{StaticResource MyEditableField}"
             Text="{Binding Strength}"
             IsReadOnly="{Binding IsEditingDisabled}" />
</StackPanel>
于 2012-12-24T02:25:13.987 回答
4

迟到的答案，但谁想要也可以创建一个自定义的可编辑文本框，实际上很容易这里是代码（显然你可以根据自己的需要修改它）

 public class EditableTextBox : TextBox
{
    public EditableTextBox()
    {
        this.BorderBrush = new SolidColorBrush(Colors.Black);
    }
    protected override void OnTapped(TappedRoutedEventArgs e)
    {
        this.IsReadOnly = false;
        SetEditingStyle();
        base.OnTapped(e);
    }

    protected override void OnDoubleTapped(DoubleTappedRoutedEventArgs e)
    {
        this.IsReadOnly = false;
        SetEditingStyle();
        base.OnDoubleTapped(e);
    }

    protected override void OnLostFocus(RoutedEventArgs e)
    {
        this.IsReadOnly = true;
        SetReadonlyStyle();
        base.OnLostFocus(e);
    }

    public void SetReadonlyStyle()
    {
        this.BorderBrush.Opacity = 0;
        this.Background.Opacity = 0;
    }

    public void SetEditingStyle()
    {
        this.BorderBrush.Opacity = 1;
        this.Background.Opacity = 1;
    }
}

样本：

在此处输入图像描述

在此处输入图像描述

教程：完整的教程网址

于 2015-03-21T17:48:50.387 回答
1

使用属性在视图和视图模型之间切换编辑模式是一种糟糕的设计方法，您应该使用事件和命令绑定来传达视图和视图模型之间这样的状态变化。

这是一篇以符合 MVVM 的方式描述原理的文章：http: //www.codeproject.com/Articles/802385/A-WPF-MVVM-In-Place-Edit-TextBox-Control

请看看并告诉我你的想法。

于 2014-07-30T22:08:59.430 回答
0

这建立在 BTownTKD 的解决方案之上，但是因为我确实更喜欢尽可能多的解决方案的 WPF，所以这里有点修改，在我的情况下，我正在尝试修改选项卡控件的名称。

我的视图模型有以下代码：

    private bool _isEditingName = false;

    public bool IsEditingName
    {
        get
        {
            return _isEditingName;
        }
        set
        {
            _isEditingName = value;
            OnPropertyChanged();
        }
    }

    public ICommand StartEditing
    {
        get
        {
            return new DelegateCommand(() =>
            {
                IsEditingName = true;
            });
        }
    }

    public ICommand EndEditing
    {
        get
        {
            return new DelegateCommand(() =>
            {
                IsEditingName = false;
            });
        }
    }

接下来是我的视图，其中包含选项卡的数据模板（不仅仅是选项卡的内容）：

<TabControl ItemsSource="{Binding Items}" SelectedItem="{Binding ActiveItem}">
    <TabControl.ItemTemplate>
        <DataTemplate>
            <Grid VerticalAlignment="Center">
                <TextBlock x:Name="TabName" Text="{Binding Name}" Visibility="{Binding IsEditingName, Converter={StaticResource InvertedBoolToVisConverter}}" VerticalAlignment="Center" HorizontalAlignment="Stretch" TextAlignment="Left">
                    <TextBlock.InputBindings>
                        <MouseBinding MouseAction="LeftDoubleClick" Command="{Binding StartEditing}" />
                    </TextBlock.InputBindings>
                </TextBlock>
                <TextBox Text="{Binding Name}" Visibility="{Binding IsEditingName, Converter={StaticResource BoolToVisConverter}}" VerticalAlignment="Center" HorizontalContentAlignment="Stretch" TextAlignment="Left" IsVisibleChanged="TextBox_IsVisibleChanged">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="LostFocus">
                            <i:InvokeCommandAction Command="{Binding EndEditing}" />
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                    <TextBox.InputBindings>
                        <KeyBinding  Key="Enter" Command="{Binding EndEditing}" />
                    </TextBox.InputBindings>
                </TextBox>
            </Grid>                 
        </DataTemplate>
    </TabControl.ItemTemplate>  
</TabControl>

最后但并非最不重要的一点是，我想要双击让我进入编辑模式，并自动聚焦在文本框上并选择所有内容以便立即输入。没有一个 xaml 解决方案像背后的简单代码一样干净，所以我最终决定将其添加到可见性更改处理程序的文本框中：

    private void TextBox_IsVisibleChanged(object sender, System.Windows.DependencyPropertyChangedEventArgs e)
    {
        var box = sender as TextBox;
        if (box != null)
        {
            if ((bool)e.NewValue)
            {
                box.Focus();
                box.SelectAll();
            }
        }
    }

在我找到的所有解决方案中，这是我最喜欢的。谢谢大家的帖子！！帮助我找到了一个非常好的整体解决方案来解决我的问题！

于 2017-07-05T20:40:42.600 回答