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