wp8.1 listview datatemplate with grid - windows-phone-8.1

Hi i have one listview with datatemplate with items
Visibility="Visible" ScrollViewer.VerticalScrollMode="Auto"
Height="{Binding ElementName=stck_main,Path=ActualHeight}"
SelectionChanged="lst_OutletDetails_SelectionChanged">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Margin" Value="5,0,0,0" />
<!--<Setter Property="Background" Value="Green"/>
<Setter Property="Opacity" Value="0.8"/>
<Setter Property="Height" Value="80"/>-->
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="100" >
<Rectangle Fill="Orange" Width="5"/>
<Grid x:Name="grd_items_outletdetails" Background="{Binding ItemBackground}" Width="{Binding ElementName=lst_OutletDetails,Path=ActualWidth}">
<Grid.ColumnDefinitions>
<ColumnDefinition ></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition ></RowDefinition>
<RowDefinition ></RowDefinition>
<RowDefinition ></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Text="{Binding OutletName}" Margin="5,0,0,0" Foreground="White" FontSize="22" Grid.Row="0" />
<TextBlock Text="{Binding LastVisitedDate}" VerticalAlignment="Center" Foreground="White" FontSize="18"
Grid.Row="0" Margin="5,0,40,0" HorizontalAlignment="Right" />
<TextBlock Text="{Binding OutletCode}" Foreground="White" Margin="5,0,0,0" FontSize="18" HorizontalAlignment="Left" Grid.Row="1"/>
<StackPanel Orientation="Horizontal" Margin="5,0,20,0" Grid.Row="1" HorizontalAlignment="Right">
<TextBlock Text="ISM:" Foreground="White" Margin="0,0,0,0" FontSize="18" />
<TextBlock Text="{Binding ISMName}" Foreground="White" Margin="5,0,20,0" FontSize="18" />
</StackPanel>
<TextBlock Text="{Binding Route}" Margin="5,0,0,0" FontSize="18" Grid.Row="2" HorizontalAlignment="Left" Foreground="White" />
<StackPanel Orientation="Horizontal" Margin="5,0,20,0" Grid.Row="2" HorizontalAlignment="Right">
<TextBlock Text="Status:" Foreground="White" Margin="5,0,0,0" FontSize="18" ></TextBlock>
<TextBlock Text="{Binding Status}" Foreground="White" Margin="5,0,20,0" FontSize="18" />
</StackPanel>
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
i want to change the colors of few items ,,, using mvvm pattern in windows phone 8.1

Put your question (problem) outside the codeblocks, it's hidden now.
What do you exactly want to do? Do you want to change the background color of few elements on your listbox? Describe it more precisely :)
As I can see you bind the ItemBackground property to your Grid Background, so just change the ItemBackground of elements you want in your source collection.

Related

Avalonia invalidCastException

We're trying to built a UI with Avalonia for a project. One of our VM's needs to use MultiBinding, but it throws this message: "System.InvalidCastException: 'Unable to cast object of type 'Avalonia.Data.MultiBinding' to type 'Avalonia.Controls.IControl'.'". How do I come around this message?
<Grid ColumnDefinitions="Auto, Auto">
<StackPanel Grid.Column="0">
<Border Classes="Left">
<ScrollViewer MaxHeight="400">
<ItemsControl Items="{Binding PublicationTypes}" Name="PubType">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid ColumnDefinitions="*,Auto,Auto">
<TextBox Text="{Binding Name}" Grid.Column="0" Name="PubName" />
<MultiBinding>
<Binding ElementName="MainView"/>
<Binding Path="Name"/>
</MultiBinding>
<Button Grid.Column="1" Classes="Options" Command="{Binding ElementName=MainView, Path=DataContext.EditPublicationType}" CommandParameter="{Binding ElementName=MainView, Path=DataContext.PublicationTypes}">
<!-- CommandParameter="{Binding ElementName=MainView}-->
<Image Source="avares://Zenref.Ava/Assets/options.ico" />
</Button>
<Button Grid.Column="2" Classes="Cross" Command="{Binding ElementName=MainView, Path=DataContext.DeletePublicationTypeCommand}" CommandParameter="{Binding Name}">
<Image Source="avares://Zenref.Ava/Assets/cross.ico" />
</Button>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Border>
</StackPanel>
<StackPanel Grid.Column="1" Orientation="Horizontal" Spacing="50" Margin="20" VerticalAlignment="Top">
<Border Width="250" Height="300" Padding="10">
<StackPanel Orientation="Vertical" Spacing="3">
<StackPanel Orientation="Horizontal" Spacing="10">
<TextBlock Text="Referencer importeret" Width="125"/>
<TextBlock Text=":"/>
<TextBlock Text="60000"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="10">
<TextBlock Text="Identificeret" Width="125"/>
<TextBlock Text=":"/>
<TextBlock Text="0"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="10">
<TextBlock Text="Uidentificeret" Width="125"/>
<TextBlock Text=":"/>
<TextBlock Text="0"/>
</StackPanel>
</StackPanel>
</Border>
</StackPanel>
<Button Name="menuButton" Command="{Binding OpenSearchCriteriaCommand}" CommandParameter="{Binding ElementName=MainView}" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="100" Margin="10">Menu</Button>
<Button Name="startButton" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="100" Margin="125,10">Start</Button>
<Button Name="exportButton" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="100" Margin="10,10">Exporter</Button>
</Grid>
We've tried looking through Avalonia's documentation and through stackoverflow, but we haven't found a similar problem.

Vertical alignment is not working -Windows Phone 8.1

Below is my XAML part of windows Phone 8.1.
<Grid Background="#FAE8C9">
<ListView x:Name="articleListing">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Margin="5,5,5,5">
<StackPanel Background="#FFFEDC" RequestedTheme="Light" Tapped="RedirectToArticle" Tag="{Binding URL}" >
<StackPanel Orientation="Horizontal" >
<StackPanel Margin="10 0 0 0" Width="{Binding Width}">
<StackPanel VerticalAlignment="Top">
<TextBlock TextWrapping="Wrap" Text="{Binding HeadLine}" FontSize="22"/>
</StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
<Image Source="/Images/cal.png" Width="20" />
<TextBlock Text="{Binding UpdatedAtDate}" FontSize="18" Foreground="#CEBFA5" />
<Image Source="/Images/clock.png" Width="20"/>
<TextBlock Text="{Binding UpdatedAtTime}" FontSize="18" Foreground="#CEBFA5" />
</StackPanel>
</StackPanel>
<StackPanel Background="Transparent" Width="{Binding Width}" >
<Image Source="{Binding ImageURL}" />
</StackPanel>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
In this, I have tried to make the below part as vertical alignment to the bottom. But it doesn't work.
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
<Image Source="/Images/cal.png" Width="20" />
<TextBlock Text="{Binding UpdatedAtDate}" FontSize="18" Foreground="#CEBFA5" />
<Image Source="/Images/clock.png" Width="20"/>
<TextBlock Text="{Binding UpdatedAtTime}" FontSize="18" Foreground="#CEBFA5" />
</StackPanel>
</StackPanel>
Please help me to solve this issue. Thank you
Most XAML containers like list views and stack panels fill from top to bottom and their height is equal to the sum of the heights of their contents.
If you've got something you want to appear at the bottom of the container you have the following choices:
Use a canvas of the desired dimensions and explicitly place each element on the canvas. This loses you a big benefit of XAML - namely that it reacts to changes in the available space and repositions elements for you.
Insert some padding into your layout to force elements to be in the place you want them to be. Again you might lose the ability to change view size etc.
You might find using a Grid rather than a StackPanel gives you a bit more control over placement - but again usually the row heights and column widths are governed by the sizes of the elements contained therein.
Use This code.
<Grid Background="#FAE8C9">
<ListView x:Name="articleListing">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Margin="5,5,5,5">
<StackPanel Background="#FFFEDC" RequestedTheme="Light" Tapped="RedirectToArticle" Tag="{Binding URL}" >
<StackPanel Orientation="Horizontal" >
<Grid Margin="10 0 0 0" Width="{Binding Width}">
<StackPanel VerticalAlignment="Top">
<TextBlock TextWrapping="Wrap" Text="{Binding HeadLine}" FontSize="22"/>
</StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
<Image Source="/Images/cal.png" Width="20" />
<TextBlock Text="{Binding UpdatedAtDate}" FontSize="18" Foreground="#CEBFA5" />
<Image Source="/Images/clock.png" Width="20"/>
<TextBlock Text="{Binding UpdatedAtTime}" FontSize="18" Foreground="#CEBFA5" />
</StackPanel>
</Grid>
<StackPanel Background="Transparent" Width="{Binding Width}" >
<Image Source="{Binding ImageURL}" />
</StackPanel>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
This might be work for you.

How to select and fire an event on expanded item in expanderview

I have designed an expanderview in windows phone.
And now I want to select the expanded item and navigate it to other page.How to navigate it.
My Xaml code for expanderview
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="TeluguOne"
Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="Videosongs" Margin="9,-7,0,0"
Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<toolkit:ExpanderView Header="Latest movies" x:Name="expander"
Margin="0,0,0,20" FontSize="35"
Style="{StaticResource ExpanderViewStyle1}" >
<toolkit:ExpanderView.Items>
<TextBlock FontSize="25" Text="Julayi" Foreground="Gray" />
<TextBlock FontSize="25" Text="ShiridiSai" Foreground="Gray" />
<TextBlock FontSize="25" Text="Srimanarayana" Foreground="Gray" />
<TextBlock FontSize="25" Text="Sudigadu" Foreground="Gray" />
</toolkit:ExpanderView.Items>
</toolkit:ExpanderView>
<toolkit:ExpanderView Header="New movies" FontSize="35" x:Name="expander1"
Margin="0,0,0,20"
Style="{StaticResource ExpanderViewStyle3}" >
<toolkit:ExpanderView.Items>
<TextBlock FontSize="25" Text="Dookudu" Foreground="Gray"/>
<TextBlock FontSize="25" Text="Mr.Perfect" Foreground="Gray" />
<TextBlock FontSize="25" Text="Raccha" Foreground="Gray"/>
<TextBlock FontSize="25" Text="Teenmar" Foreground="Gray" />
</toolkit:ExpanderView.Items>
</toolkit:ExpanderView>
<toolkit:ExpanderView Header="Old movies" FontSize="35" x:Name="expander2"
Style="{StaticResource ExpanderViewStyle2}" >
<toolkit:ExpanderView.Items>
<TextBlock FontSize="25" Text="Mayabazar" Foreground="Gray"/>
<TextBlock FontSize="25" Text="Alluddin Adbhutha Deepam"
Foreground="Gray" TextWrapping="Wrap"/>
</toolkit:ExpanderView.Items>
</toolkit:ExpanderView>
</StackPanel>
</Grid>.
MY screenshot of the expaderview is
In the above screenshot i need to select julayi and one after the other movies and navigate to other page.
Please anybody help me how can I select the expanded items and perform events on it.
Many Thanks

Windows Phone Listpicker crash with lumia 1520

One of my user has problem with the listpicker.
The problem is only happen with his lumia 1520 (and I think also with other phone with that resolution but I can't test it).
The listpicker crash when the user tap on it and it goes to full mode display in order to select the item.
Here is the stack trace:
Frame Image Function Offset
0 system_windows_ni MS.Internal.XcpImports.CheckHResult 0x0019fe24
1 system_windows_ni MS.Internal.XcpImports.SetValue 0x00000056
2 system_windows_ni MS.Internal.XcpImports.SetValue 0x000004e4
3 system_windows_ni System.Windows.DependencyObject.SetObjectValueToCore 0x0000006c
4 system_windows_ni System.Windows.DependencyObject.SetEffectiveValue 0x0000002e
5 system_windows_ni System.Windows.DependencyObject.UpdateEffectiveValue 0x00000086
6 system_windows_ni System.Windows.DependencyObject.SetValueInternal 0x00000112
7 microsoft_phone_ni Microsoft.Phone.Controls.PhoneApplicationFrame.UpdateMargin 0x000001b8
8 microsoft_phone_ni Microsoft.Phone.Controls.PhoneApplicationFrame.InternalUpdateOrientationAndMarginForPage 0x0000006c
9 microsoft_phone_ni Microsoft.Phone.Controls.PhoneApplicationFrame.System.Windows.Controls.IFrame.InternalUpdateOrientationAndMarginForPage 0x00000020
10 microsoft_phone_ni System.Windows.Navigation.NavigationService.CompleteNavigation 0x0000016a
11 microsoft_phone_ni System.Windows.Navigation.NavigationService+__c__DisplayClass7._NavigateCore_StartNavigation_b__4 0x00000020
this is the xaml code for the listpicker:
<toolkit:ListPicker VerticalAlignment="Center" Grid.Column="1" Grid.Row="1" ItemsSource="{Binding Categories}" SelectedItem="{Binding Category, Mode=TwoWay}" />
and this is the style:
<Style TargetType="toolkit:ListPicker">
<Setter Property="FullModeItemTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="16 15 0 15">
<TextBlock Text="{Binding}"
Margin="0 0 0 0"
FontSize="{StaticResource PhoneFontSizeLarge}"
FontFamily="{StaticResource PhoneFontFamilyLight}"/>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
this is the page where there is the listpicker:
<local:MyPhoneApplicationPage
x:Class="EasyShopping.Views.Details.ProductDetailView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:local="clr-namespace:EasyShopping.Framework"
xmlns:cal="clr-namespace:Caliburn.Micro;assembly=Caliburn.Micro"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d" d:DesignHeight="696" d:DesignWidth="480"
xmlns:vm="clr-namespace:EasyShopping.ViewModels.Details"
d:DataContext="{d:DesignInstance vm:SampleProductDetailViewModel, IsDesignTimeCreatable=True}"
shell:SystemTray.IsVisible="False">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="{Binding Resources.AppNameTitle}" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="{Binding Resources.Product}" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Resources.Name}" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBox Grid.Column="1" Text="{Binding Name, Mode=TwoWay}" InputScope="Text" />
<TextBlock Grid.Row="1" Text="{Binding Resources.Category}" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource PhoneTextNormalStyle}"/>
<toolkit:ListPicker VerticalAlignment="Center" Grid.Column="1" Grid.Row="1" ItemsSource="{Binding Categories}" SelectedItem="{Binding Category, Mode=TwoWay}" />
<TextBlock Grid.Row="2" TextWrapping="Wrap" Text="{Binding Resources.DefaultMeasureUnit}" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource PhoneTextNormalStyle}"/>
<toolkit:ListPicker VerticalAlignment="Center" Grid.Column="1" Grid.Row="2" ItemsSource="{Binding QuantityTypes}" SelectedItem="{Binding QtaType, Mode=TwoWay}" />
</Grid>
</Grid>
<local:MyPhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<cal:AppBarButton IconUri="/Images/save.png" Text="save" Message="Save" />
<cal:AppBarButton IconUri="/Images/cancel.png" Text="cancel" Message="Cancel" />
</shell:ApplicationBar>
</local:MyPhoneApplicationPage.ApplicationBar>
<toolkit:TransitionService.NavigationInTransition>
<toolkit:NavigationInTransition>
<toolkit:NavigationInTransition.Backward>
<toolkit:TurnstileTransition Mode="BackwardIn"/>
</toolkit:NavigationInTransition.Backward>
<toolkit:NavigationInTransition.Forward>
<toolkit:TurnstileTransition Mode="ForwardIn"/>
</toolkit:NavigationInTransition.Forward>
</toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<toolkit:TransitionService.NavigationOutTransition>
<toolkit:NavigationOutTransition>
<toolkit:NavigationOutTransition.Backward>
<toolkit:TurnstileTransition Mode="BackwardOut"/>
</toolkit:NavigationOutTransition.Backward>
<toolkit:NavigationOutTransition.Forward>
<toolkit:TurnstileTransition Mode="ForwardOut"/>
</toolkit:NavigationOutTransition.Forward>
</toolkit:NavigationOutTransition>
</toolkit:TransitionService.NavigationOutTransition>
someone could help me?
thank you
Luca

Windows Phone TextBlock aligment

In ListBox with ItemTemplate second TextBlock not align to right.
In design mode second TextBlock align to right
<ListBox >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock
Grid.Column="0" Padding="10" HorizontalAlignment="Left"
Text="{Binding Display}" FontSize="30"
/>
<TextBlock
Grid.Column="1" HorizontalAlignment="Right"
Text="{Binding Length}" FontSize="30"
/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBoxItem>
<Grid>
<TextBlock
Grid.Column="0" Padding="10" HorizontalAlignment="Left"
Text="2014-01-24 23:00:00" FontSize="30"
/>
<TextBlock
Grid.Column="1" HorizontalAlignment="Right"
Text="00:00" FontSize="30"
/>
</Grid>
</ListBoxItem>
</ListBox>
Result:
Item in designer:
You need to change HorizontalContentAligment to Strech - to fill the space with your item, by default it's set to the left:
<ListBox Name="myList">
<ListBoxItem HorizontalContentAlignment="Stretch">
<Grid>
<TextBlock HorizontalAlignment="Left" Text="2014-01-24 23:00:00" FontSize="30"/>
<TextBlock HorizontalAlignment="Right" Text="00:00" FontSize="30"/>
</Grid>
</ListBoxItem>
</ListBox>
You can also set Property of ItemContainerStyle:
<ListBox>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock Padding="10" HorizontalAlignment="Left" Text="{Binding Display}" FontSize="30"/>
<TextBlock HorizontalAlignment="Right" Text="{Binding Length}" FontSize="30"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBoxItem>
<Grid>
<TextBlock Padding="10" HorizontalAlignment="Left" Text="2014-01-24 23:00:00" FontSize="30"/>
<TextBlock Padding="10" HorizontalAlignment="Right" Text="00:00" FontSize="30"/>
</Grid>
</ListBoxItem>
</ListBox>
In case you have only two items, one aligned to left, one to right - I've removed Colums. Although they help to manage the content, align it and they also will be helpful if you need to wrap text and/or perform more operations on it.
This is how you can do it :
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="0" Padding="10" HorizontalAlignment="Left"
Text="{Binding Display}" FontSize="30"
/>
<TextBlock
Grid.Column="1" HorizontalAlignment="Right"
Text="{Binding Length}" FontSize="30"
/>
</Grid>
This will give 75% width to the first column and remaining 25% to the second column.
If you want the first and second columns to dynamically change width according to the content then you can give one width as "Auto" and the other no width property (or Width="*") which means it will take the remaining area as the column width.
I would take Alexandr Sulimov solution. I made some improvements. I think it is the best way to do it.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Padding="10" Text="{Binding Display}" FontSize="30" />
<TextBlock Grid.Column="1" Text="{Binding Length}" FontSize="30" />
</Grid>