XAML 사용자 지정 컨트롤 - 수학적 분수

Question

저는 XAML을 처음 접했지만 일반적으로 C# 및 .NET과는 다릅니다. 나는 Windows 8.1 App을 만들고 있는데, 분자와 분모가있는 구조 (두 번째 위의 첫 번째)와 수평선이있는 구조를 나타내는 수학 분수 컨트롤을 만들고 구현하고 싶습니다. 여기에 내가 이미 성취 한 것을 제시 하겠지만, 그것이 매우 가난하다는 것을 알고 있으며 아마도 내 생각 자체가 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