XAML自定义控件 - 数学分数

Question

我是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>

我希望这个控件可以重复使用 - 我将实现更多这样的结构（如积分，导数，求和等），因此所有这些控件的目标是将一个控件放入另一个（例如，与另一个分数作为分子，一个积分作为分母）。

我不期待一个有效的例子（虽然一个完整的例子对我来说很有用），我会感谢每一个提示，提示，代码我都来到这里。

Answer 1

我首先将一个新的UserControl项添加到您的项目中。 然后，使用标准的控件集（文本框/块，组合框等）来安排他们如何获得您想要的结果。 然后，您可以为这些控件添加样式 - 以及可能为分数控件添加任何“背景计算”; 例如1/4 ==（值/ 4）3/8 ==（值/ 8）* 3

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