XAML如何制作文本块/文本框编辑切换？

Question

我可能正在接近这一切,所以请告诉我你是否有其他建议.

我正在为Windows RT制作一个应用程序,它会向用户显示一堆文本块,例如角色统计数据.用户将看到:

Str: 10
Con: 10
Dex: 10

等等.

我希望他们能够填充这些,然后根据结果计算选择的视图值.

我的方法是单击顶部的"编辑"按钮,并在每个可编辑的文本块上切换一些文本框.

当尝试使用"Blend for Visual Studio"进行设置时,我似乎无法创建一个小于49x34的文本框(比我的文本块大得多).

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

我是XAML的新手,我似乎无法找到人们设置这样的可编辑字段的好例子,那么我应该如何让一堆静态字段具有可编辑的文本框？

Answer 1

我将在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的这个实现.这很简单,可以选择反转.

Answer 2

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

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

这样，您就不必将 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>