CODEWITHSUNDEEP
c#xamlcustom-controlswindowstemplate-control
Danioss
Danioss

Reputation: 3095

XAML Custom control - mathematical fraction

I'm completely new to XAML but not to C# and .NET in general. I'm creating a Windows 8.1 App and I want to create and implement a mathematical fraction control which would represent a structure with numerator and denominator (the first above the second) with horizontal line between them. I'll present here what I already achieved but I know it's very poor and probably the way of my thinking itself is not XAML-like.

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

I'd like this control to be reusable - I'm going to implement many more of such structures (like integrals, derivatives, sums etc.) so the goal of all of these controls is to enable putting one inside another (e.g. fraction with another fraction as its numerator and an integral as its denominator).

I'm not expecting a working example (although one full example would be great for me to learn), I'll appreciate every tip, hint, code I get here.

Upvotes: 1

Views: 394

Answers (2)

Ram
Ram

Reputation: 21

Use as following on TextBlock as in this sample:

<TextBlock Typography.Fraction="Slashed" Text="5/6"</TextBlock>

Upvotes: 0

else
else

Reputation: 910

I would start off by adding a new UserControl item to your project. Then, using the standard set of controls (textboxes/blocks, comboboxes, ect)arrange them how you wish to get the desired result you're after. You can then add styles to those controls - as well as possibly adding in any "background computation" for your fraction-control; such as 1/4 == (value/4) 3/8 == (value/8)*3

If nobody beats me too it, I will attempt to provide you with some code... but I recommend having a quick go yourself :D

Upvotes: 0

Related Questions