XAML 自定义控件 - 数学分数答案

【问题标题】：XAML Custom control - mathematical fractionXAML 自定义控件 - 数学分数
【发布时间】：2017-01-11 14:35:12
【问题描述】：

我对 XAML 完全陌生，但对 C# 和 .NET 并不陌生。我正在创建一个 Windows 8.1 应用程序，我想创建和实现一个数学分数控件，它表示一个分子和分母（第一个高于第二个）的结构，它们之间有水平线。我将在这里介绍我已经取得的成果，但我知道它很差，而且我的思维方式本身可能与 XAML 不同。

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestWindowsApplication"
    xmlns:local2="using:TestWindowsApplication.CustomControls">

    <Style TargetType="local2:MathStructure" >
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local2:MathStructure">
                    <StackPanel>
                        <Border>
                            <Grid>
                                <Canvas>
                                    <TextBlock>
                                        1
                                    </TextBlock>
                                </Canvas>
                            </Grid>
                        </Border>
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="local2:FractionControl">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local2:FractionControl">
                    <Border BorderThickness="2" BorderBrush="Green">
                        <Grid Height="200" Width="120">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="20"></ColumnDefinition>
                                <ColumnDefinition Width="20"></ColumnDefinition>
                                <ColumnDefinition Width="20"></ColumnDefinition>
                                <ColumnDefinition Width="20"></ColumnDefinition>
                                <ColumnDefinition Width="20"></ColumnDefinition>
                                <ColumnDefinition Width="20"></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="20"></RowDefinition>
                                <RowDefinition Height="20"></RowDefinition>
                                <RowDefinition Height="20"></RowDefinition>
                                <RowDefinition Height="20"></RowDefinition>
                                <RowDefinition Height="20"></RowDefinition>
                                <RowDefinition Height="20"></RowDefinition>
                                <RowDefinition Height="20"></RowDefinition>
                                <RowDefinition Height="20"></RowDefinition>
                                <RowDefinition Height="20"></RowDefinition>
                                <RowDefinition Height="20"></RowDefinition>
                            </Grid.RowDefinitions>

                            <Border Grid.Row="4" Grid.Column="1" Grid.ColumnSpan="4" BorderThickness="0,0,0,2" BorderBrush="Red"/>

                            <Border BorderThickness="1" BorderBrush="White" Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="2" Grid.RowSpan="2">
                                <Grid>

                                </Grid>
                            </Border>

                            <Border BorderThickness="1" BorderBrush="White" Grid.Row="6" Grid.Column="2" Grid.ColumnSpan="2" Grid.RowSpan="2">
                                <Grid>

                                </Grid>
                            </Border>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

我希望这个控件是可重用的 - 我将实现更多这样的结构（如积分、导数、总和等），因此所有这些控件的目标是能够将一个放在另一个里面（例如以另一个分数为分子，以一个积分为分母的分数）。

我不希望有一个有效的示例（尽管一个完整的示例对我来说是很好的学习），我会很感激我在这里得到的每一个提示、提示和代码。

【问题讨论】：

请问这是干什么用的？输入还是输出？显示单个分数 - 或范围（您的行定义让我失望）
它将成为一种工具，使用户能够选择要插入的结构 - 例如分数，然后再次使用户能够插入另一个结构（代替分数的分子或分母）或符号（数字或字符/字符串）。所以它必须是完全可编辑的——比如 microsoft office word equations。

标签： c# xaml custom-controls windows-applications template-control

【解决方案1】：

我将从向您的项目中添加一个新的 UserControl 项开始。然后，使用标准的控件集（文本框/块、组合框等）按照您希望获得所需结果的方式排列它们。然后，您可以为这些控件添加样式 - 以及可能为您的分数控件添加任何“背景计算”；如 1/4 == (值/4) 3/8 == (值/8)*3

如果没有人能打败我，我会尝试为您提供一些代码...但我建议您自己快点：D

【讨论】：

我从模板化控件开始，因为 Internet 告诉我它更适合更复杂的结构。我将按照您的建议将其更改为 UserControl，但是我最关心的是如何将我的分数（以及后来的其他控件）堆叠在一起？在谷歌搜索时我应该专门寻找这里的任何关键字吗？我迫不及待地想看到代码（虽然我正在同时编写自己的代码）：D
您希望同时显示所有分数？模板化控件可能是要走的路……我自己只是使用 UserControls。
是的！我需要能够同时显示整个方程（所以是数学结构树，特别是分数）。所以所有嵌套的元素都必须是可见的。
这些是基于另一个操作动态计算的，还是真的想显示每个分数？我建议看一下 ItemsControl。 items 控件允许您传递“事物”的集合和“事物”的类型以生成垂直或水平的一系列控件 - 这将基于 ItemTemplate。
所以，我相信您想要的是一个允许用户输入的控件，然后识别所述输入并向您显示相关/可用的分数？我可能完全错了，但您需要从可能的结果列表开始 - 或者在用户输入后即时计算这些结果。无需在 XAML 中为这些项目创建特定列，只需使用 C# 创建列表并将其绑定到控件的 itemssource（如 listview、combobox、itemscontrol）。然后，您可以将此控件添加到 Flyout 或弹出控件 - 使其看起来像对用户的“建议”。