XAML Custom control - mathematical fraction

Question

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.

What is it for, may I ask? Input or output? Showing single fractions - or range (your row definitions are throwing me off) — else, Jan 11 '17 at 15:04
It's going to be a tool enabling user to choose a structure to insert - say a fraction, and then, again, enabling user to insert another structure (in place of fraction's numerator or denominator) OR a sign (digit or character/string). So it has to be completely editable - something like microsoft office word equations. — Aranha, Jan 11 '17 at 15:20

else · Answer 1 · 2017-01-11T15:13:59.013

0

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

edited Jan 11 '17 at 15:13

answered Jan 11 '17 at 14:53

else

872
6
15

I started off with templated control because Internet told me it's better for more complicated structures. I'll change it to UserControl as you suggest, however my biggeset concern is how to stack my fractions (and later other controls) one inside another? Any keyword here I should be specifically looking for when googling it? I can't wait to see the code (although I'm writing my own simultaneously) :D – Aranha Jan 11 '17 at 15:05
You wish to show all the fractions at the same time? Templated controls may be the way to go... I just use UserControls myself. – else Jan 11 '17 at 15:07
Yes! I need to be able to show entire equation (so a tree of math structures, in particular a fraction) at the same time. So all nested elements have to be visible. – Aranha Jan 11 '17 at 15:17
Are these computed on the fly based off of another operation, or do literally want to show every fraction? I would suggest taking a look at the ItemsControl. The items control allows you to pass a collection of 'things' and the type of 'thing' to produce a vertical or horizontal series of controls - which would be based off of a ItemTemplate. – else Jan 11 '17 at 15:23
So, I believe what you want is a control that allows user input, then recognises said input and shows you associated/available fractions? I may be completely wrong, but you need to start with a list of possible results - or computed these on the fly after user input. No need to create specific columns for these items in XAML, just use C# to create a list and bind it to the itemssource of a control (like listview, combobox, itemscontrol). You could then add this control to a Flyout or popup control - to make it look like a 'suggestion' to the user. – else Jan 11 '17 at 15:40
Nope :D It's supposed to be identical to Microsoft Office Word equation editor, let me show you first image from google: http://cloud.addictivetips.com/wp-content/uploads/2010/03/inserted.jpg . So the point is to let user create such equations but there is no need to calculate their value later - the purpose of the equation is only representational. – Aranha Jan 11 '17 at 15:50

XAML Custom control - mathematical fraction

1 Answers1