Develop Reference

Expanding selected row in gridview on WEH8.1

I am currently developing an application for Windows Embedded Handheld 8.1 and have run into an issue where I have a dynamically expanding grid inside a gridview. My problem is that since this application runs on handheld devices I have a very limited space to use on every row.
What I would like to do is to just show general information on each row and then when a row is tapped or selected in the device, I would like to somehow expand that specific row and show some more detailed information, this seems to be problematic however since as soon as I start messing with a specific rows height, every other row in the ItemTemplate naturally also grows, leaving a lot of blank spaces in the grid.
Normally I would have used a DataGrid and DataGrid.RowDetailsTemplate, but that control does not seem to be implemented in WEH8.1.
So my question is if someone has a solution or possibly a workaround to my problem?
Code Example on GridView Below:
<ScrollViewer Grid.Row="1" Margin="0">
<GridView x:Name="gvCustomerOrderRows">
<GridView.ItemTemplate>
<DataTemplate>
<Grid Background="{Binding BackgroundColor}" Margin="0" Height="{Binding ShowSecondRowHeight}" Tapped="Grid_Tapped" Tag="{Binding kor_row}">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="31.25"/>
<ColumnDefinition Width="58.75"/>
<ColumnDefinition Width="105"/>
<ColumnDefinition Width="65"/>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="70"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding kor_pos}" Grid.Row="0" Visibility="{Binding VisibilityHideThenText}" Grid.Column="0" FontSize="14" VerticalAlignment="Center" Margin="0,17,0,16"></TextBlock>
<TextBlock Text="{Binding kor_partno}" Grid.Row="0" Visibility="{Binding VisibilityHideThenText}" Grid.Column="1" FontSize="14" VerticalAlignment="Center" Margin="0,17,0,16" Grid.ColumnSpan="2" ></TextBlock>
<TextBlock Text="{Binding kor_txt}" Grid.Row="0" Grid.Column="3" Grid.ColumnSpan="2" FontSize="14" VerticalAlignment="Center" MaxLines="2" TextWrapping="Wrap"/>
<TextBlock Text="{Binding kor_rqty}" Grid.Row="0" Visibility="{Binding VisibilityHideThenText}" Grid.Column="5" FontSize="14" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Bold" TextAlignment="Center"></TextBlock>
<TextBox x:Name="txtQuantity" Grid.Row="0" Text="{Binding rep_qty, Mode=TwoWay}" Visibility="{Binding VisibilityHideThenText}" Background="{Binding DeliverColor, Mode=TwoWay}" BorderBrush="{Binding DeliverColor, Mode=TwoWay}" InputScope="Number" TextAlignment="Right" Grid.Column="6" GotFocus="txtQuantity_GotFocus" Margin="6,10,-1,0" Height="39"/>
<TextBlock Text="{Binding kor_ldat}" Grid.Row="1" Visibility="{Binding VisibilityHideThenText}" Grid.Column="1" Grid.ColumnSpan="2" FontSize="14" VerticalAlignment="Top" HorizontalAlignment="Left" TextAlignment="Left"></TextBlock>
<TextBlock Text="Stock Loc.: " Grid.Row="1" Grid.Column="3" TextAlignment="Right" VerticalAlignment="Top" FontSize="14" Visibility="{Binding VisibilityHideThenText}"></TextBlock>
<TextBlock Grid.Row="1" Visibility="{Binding VisibilityHideThenText}" Tag="{Binding kor_row}" Grid.Column="4" Grid.ColumnSpan="2" VerticalAlignment="Top" FontWeight="Bold" FontSize="14" Tapped="TextBlock_Tapped" Margin="10,0,0,0"><Underline><Run Text="{Binding SelectedLocation, Mode=TwoWay}"/> </Underline></TextBlock>
<TextBlock Text="{Binding LocQuantity}" Grid.Row="1" Grid.Column="5" VerticalAlignment="Top" Visibility="{Binding VisibilityHideThenText}" FontSize="14" TextAlignment="Center"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</ScrollViewer>

How to get ListBox Item height

Here I have a ListBox:
<ListBox Name="listbox1" ItemsSource="{Binding Area}" Grid.Column="0" Grid.Row="0" HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Green" BorderThickness="2" Margin="5" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="8*" />
</Grid.ColumnDefinitions>
<DockPanel Grid.Row="0" Grid.Column="0" Margin="2">
<TextBox PreviewTextInput="minMaxPreviewInput" IsReadOnly="{Binding AutoChange}" Text="{Binding MinIntValue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Width="30" DockPanel.Dock="Right" TextAlignment="Right"/>
<TextBlock Text="Minimum Value" DockPanel.Dock="Left"/>
</DockPanel>
<DockPanel Grid.Row="1" Grid.Column="0" Margin="2">
<TextBox PreviewTextInput="minMaxPreviewInput" IsReadOnly="{Binding AutoChange}" Text="{Binding MaxIntValue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Width="30" DockPanel.Dock="Right" TextAlignment="Right"/>
<TextBlock Text="Maximum Value" DockPanel.Dock="Left"/>
</DockPanel>
<DockPanel Grid.Row="2" Grid.Column="0" Margin="2">
<TextBlock Text="{Binding AreaName}" FontSize="20" DockPanel.Dock="Left"/>
<TextBlock Text=":" FontSize="20" DockPanel.Dock="Left"/>
<TextBlock Text="{Binding Start}" FontSize="20" DockPanel.Dock="Left"/>
<CheckBox FlowDirection="RightToLeft" DockPanel.Dock="Right" IsChecked="{Binding AutoChange, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<TextBlock FlowDirection="LeftToRight" Text="Auto-Change:" />
</CheckBox>
</DockPanel>
<Border BorderBrush="Blue" BorderThickness="1" Grid.Column="1" Grid.RowSpan="3" Margin="5">
<Canvas Name="canvas1" >
<Canvas.LayoutTransform>
<ScaleTransform ScaleX="1" ScaleY="-1" CenterX=".5" CenterY=".5" />
</Canvas.LayoutTransform>
<Polyline Points="{Binding SegmentPoints}" Stroke="Black" StrokeThickness="1"/>
</Canvas>
</Border>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Everything works as great. I'm having problem accessing the Canvas size. How can I access it? Listbox.ActualHeight and ListBox.ActualWidth are bigger than the Canvas, and I need to get the Canvas exact size.
Thanks for the help in advance.

As you are trying to base the value of other bound values on the Canvas size, use OneWayToSource mode on a Binding for ActualWidth and ActualHeight to some properties on your ViewModel.
This will push the values from the control into your ViewModel allowing you to adjust the values in SegmentPoints so that they are scaled correctly according to the Canvas size.

Horizontal ListView items do not scroll when swiped in WinRT app?

I have a C# WinRT/8.1 app that uses a ListView with a child stack panel to show items in a horizontal row. That works fine, except I am having the same problem discussed in this SO post:
WinRT Xaml ListView - Touch doesn't scroll well
Except worse. My items don't scroll even when the fingertip is pressed on the margin between items. Unfortunately I don't have a parent Panorama control or ScrollView control to blame. How can I fix this?
NOTE: I switched to a ListView from a GridView because of SO posts I read that indicated GridView's with horizontal items are problematic, which was the case for me.
Here is the XAML for the page:
<Page
<!-- headers snipped for brevity -->
<Page.Resources>
<Converters:DebugBindingConverter x:Key="DebugBindingConverter"/>
<Converters:VideomarkLocationToString x:Key="VideomarkLocationToString"/>
<common:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
<DataTemplate x:Key="HorzVideomarksItemTemplate1">
<Grid d:DesignWidth="977" d:DesignHeight="746" Height="121" Width="252">
<Grid.RowDefinitions>
<RowDefinition Height="20*"/>
<RowDefinition Height="52*"/>
<RowDefinition Height="23*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="txtLocation" TextWrapping="Wrap" Text="{Binding OffsetSecs, Converter={StaticResource VideomarkLocationToString}}" Grid.Row="2" />
<TextBlock x:Name="txtNote" Text="{Binding Text}" TextTrimming="CharacterEllipsis"/>
<Image x:Name="imgThumbnail" Grid.Row="1" Source="{Binding ThumbnailAsync}"/>
<!-- <TextBlock x:Name="txtTest2" HorizontalAlignment="Left" Margin="81,93,0,0" TextWrapping="Wrap"
Text="{Binding Videomarks, Converter={StaticResource DebugBindingConverter}}" VerticalAlignment="Top" Height="87" Width="150" FontSize="12"/> -->
</Grid>
</DataTemplate>
</Page.Resources>
<Grid x:Name="gridPage"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="25" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="897*"/>
<ColumnDefinition Width="469*"/>
</Grid.ColumnDefinitions>
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="347*"/>
<RowDefinition Height="231*"/>
</Grid.RowDefinitions>
<!-- Back button and page title -->
<Grid x:Name="gridTopRow" Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
Style="{StaticResource NavigationBackButtonNormalStyle}"
VerticalAlignment="Top"
AutomationProperties.Name="Back"
AutomationProperties.AutomationId="BackButton"
AutomationProperties.ItemType="Navigation Button"/>
<TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,894,40" Tapped="pageTitle_Tapped"/>
<Button x:Name="exitButton"
Click="exitButton_Click"
Style="{StaticResource ClosePaneAppBarButtonStyle}" Margin="1065,27,0,9" Grid.Column="1" Width="100" Visibility="{Binding Main.IsDebuggerAttached, Converter={StaticResource BooleanToVisibilityConverter}, Mode=OneWay}" />
<Button x:Name="btnTest" Content="test" Grid.Column="1" HorizontalAlignment="Left" Margin="883,59,0,0" VerticalAlignment="Top" FontSize="36" Click="btnTest_Click" Visibility="Collapsed"/>
</Grid>
<WebView x:Name="webViewVideoPlayer" Grid.Row="1" ScriptNotify="ScriptNotifyPlayLocation" Margin="25" />
<Button x:Name="btnVideomark" Content="Bookmark" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="578,53,0,0" Height="54" FontSize="26.667" Click="btnVideomark_Click" Width="181"/>
<ListView
x:Name="listviewVideomarks" Grid.Row="2" Grid.ColumnSpan="2" Opacity="1" IsHitTestVisible="False" Margin="20"
ItemsSource="{Binding Videomarks.VideomarksCollection, Source={StaticResource Locator}}"
ItemTemplate="{StaticResource HorzVideomarksItemTemplate1}" SelectionMode="None"
>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel x:Name="stackVideomarksHorz" Orientation="Horizontal">
</StackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
<Border x:Name="borderAddVideomark" BorderThickness="5" Grid.ColumnSpan="2" Margin="369,53,319,112" Grid.Row="1" BorderBrush="#FF144989" CornerRadius="25" Opacity="0" IsHitTestVisible="False" Loaded="border_Loaded">
<Grid x:Name="gridAddVideomark" IsHitTestVisible="False" Grid.ColumnSpan="2" Grid.Row="1" Opacity="1" Grid.RowSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="187*"/>
<ColumnDefinition Width="188*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="189*"/>
<RowDefinition Height="137*"/>
<RowDefinition Height="62*"/>
</Grid.RowDefinitions>
<TextBlock x:Name="lblVideomarkLocation" Grid.Column="1" TextWrapping="Wrap" Text="TextBlock" Margin="40,10,10,10" FontSize="18.667"/>
<TextBox x:Name="txtVideomarkNote" Grid.Row="1" TextWrapping="Wrap" Grid.ColumnSpan="2" Margin="10,10,10,2"/>
<Button x:Name="btnOk" Content="OK" HorizontalAlignment="Left" Margin="92,10,0,0" Grid.Row="2" VerticalAlignment="Top" Width="192" Foreground="White" FontSize="21.333" Height="45" Click="btnOk_Click"/>
<Button x:Name="btnCancel" Content="Cancel" HorizontalAlignment="Left" Margin="88,10,0,0" Grid.Row="2" VerticalAlignment="Top" Width="192" Foreground="White" FontSize="21.333" Height="45" Grid.Column="1" Click="btnCancel_Click"/>
<Rectangle x:Name="rectVideomarkThumbnail" Fill="#FFF4F4F5" Stroke="Black" Margin="10"/>
</Grid>
</Border>
</Grid>
</Page>

I am not sure which directions you are trying to scroll, but I think your problem will be fixed if you disable the StackPanel scroll and enable scrolling in both directions on the ListView.
<ListView
x:Name="listviewVideomarks" Grid.Row="2" Grid.ColumnSpan="2" Opacity="1" IsHitTestVisible="False" Margin="20"
ItemsSource="{Binding Videomarks.VideomarksCollection, Source={StaticResource Locator}}"
ItemTemplate="{StaticResource HorzVideomarksItemTemplate1}" SelectionMode="None"
ScrollViewer.HorizontalScrollMode="Auto" ScrollViewer.VerticalScrollMode="Auto"
>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel x:Name="stackVideomarksHorz" Orientation="Horizontal"
ScrollViewer.HorizontalScrollMode="Disabled"
ScrollViewer.VerticalScrollMode="Disabled">
</StackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>

Splitting Button in Half

I'm trying to split a button in half so that I can show text data in each half - which can also be increased in size when the application is expanded.
This is the code I've got soo far.
<Button Margin="16,0,16,6" Background="#daf0fc" BorderThickness="0" Height="Auto" HorizontalAlignment="Stretch" BorderBrush="White" Click="edit_house" Padding="0" Focusable="False">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Vertical" VerticalAlignment="Top" HorizontalAlignment="Left" Background="Black">
<StackPanel Orientation="Horizontal">
<TextBlock Margin="0,0,5,0" Text="{Binding house_number}" FontWeight="Bold" FontSize="14" />
<TextBlock Margin="0,0,0,0" Text="{Binding street}" FontWeight="Bold" FontSize="14" />
</StackPanel>
<TextBlock Text="{Binding postcode}" />
<TextBlock Margin="0,6,0,0" Text="{Binding house_type_text}" />
</StackPanel>
<StackPanel Grid.Column="1" Orientation="Vertical" VerticalAlignment="Top">
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="0,2,0,0">
<TextBlock Text="£" HorizontalAlignment="Right" Foreground="#FF9D1818" FontWeight="ExtraBold" FontSize="16" />
<TextBlock Text="{Binding house_price}" HorizontalAlignment="Right" Foreground="#FF9D1818" FontWeight="ExtraBold" FontSize="16" />
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Margin="0,0,0,0">
<TextBlock Margin="0,0,0,0" Text="{Binding sold_text}" HorizontalAlignment="Right" Foreground="#FF107910" FontWeight="ExtraBold" FontSize="14" />
</StackPanel>
</StackPanel>
I've tried setting each StackPanel half to stretch, but they both just Float in the centre of the button, so I can't align the text on either half.
Here's a graphical representation of the button I'm trying to create...
Update:
Here is what I'm getting with the code above, sadly I'm struggling to get the text to align, or to get anything to stretch to the full width of each half:

StackPanel won't do that; it just stacks elements.
Instead, use a <Grid> with two columns.

StackPanel is not the right container for this. Try using a Grid like this:
<Button>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
...
</StackPanel>
<StackPanel Grid.Colunn="1">
...
</StackPanel>
</Grid>
</Button>

I like to use UniformGrids, although a Grid will also work if you need to define your Rows/Columns individually
Here's an example, with correct alignments:
<UniformGrid Columns="2">
<StackPanel Background="LightBlue" >
<StackPanel Orientation="Horizontal">
<TextBlock Margin="0,0,5,0" Text="123" FontWeight="Bold" FontSize="14" />
<TextBlock Margin="0,0,0,0" Text="Main Street" FontWeight="Bold" FontSize="14" />
</StackPanel>
<TextBlock Text="12345" />
<TextBlock Margin="0,6,0,0" Text="Type" />
</StackPanel>
<StackPanel Background="Yellow">
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" Margin="0,2,0,0" HorizontalAlignment="Right">
<TextBlock Text="£" HorizontalAlignment="Right" Foreground="#FF9D1818" FontWeight="ExtraBold" FontSize="16" />
<TextBlock Text="100.00" HorizontalAlignment="Right" Foreground="#FF9D1818" FontWeight="ExtraBold" FontSize="16" />
</StackPanel>
<TextBlock Margin="0,0,0,0" Text="200.00" HorizontalAlignment="Right" Foreground="#FF107910" FontWeight="ExtraBold" FontSize="14" />
</StackPanel>
</UniformGrid>
You might also be interested in checking out this link, which gives you a quick visual look at each of WPF's different layouts and how they act.

Access and modify properties of grid row within data template

I have difficulty accessing a grid or its rows(within a ListBox), despite defining the grid's or row's name. I intend to set a new MaxHeight to one of its rows when some parameter is passed in from a SharePoint browsable property to the Silverlight control.
How may i achieve the desired effect? Binding perhaps?
# Page.xaml:
<ListBox ItemsSource="{Binding}" DataContext="" x:Name="NewsList" SelectionChanged="NewsList_SelectionChanged" SelectionMode="Single" Width="580" Height="360" VerticalAlignment="Top" HorizontalAlignment="Center" >
<ListBox.ItemTemplate>
<DataTemplate >
<Grid Height="110" Width="540" x:Name="StaffNewsBodyHeight">
<Grid Height="110" Width="540">
<Grid.RowDefinitions>
<RowDefinition Height="15" />
<RowDefinition Height="{Binding StaffNewsBodyHeight}" />
<RowDefinition Height="15" />
</Grid.RowDefinitions> <Grid.ColumnDefinitions>
<ColumnDefinition Width="82" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border CornerRadius="2" BorderThickness="2" BorderBrush="Gray" Height="82" Width="82" Background="LemonChiffon" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.RowSpan="3" Grid.Column="0" >
<Image Source="{Binding NewsThumbnail}" Style="{StaticResource ThumbNailPreview}" />
</Border>
<TextBlock x:Name="NewsTitle" FontFamily="Arial" FontWeight="bold" TextDecorations="Underline" Text="{Binding Title}" Style="{StaticResource TitleText}" Grid.Row="0" Grid.Column="1"/>
<TextBlock x:Name="NewsBody" FontFamily="Arial" Text="{Binding NewsBody}" Margin="5" Style="{StaticResource DescriptionBlock}" Grid.Row="1" Grid.Column="1" />
<StackPanel Orientation="Horizontal" Grid.Row="2" Grid.Column="1" Margin="3,3,3,3">
<TextBlock Text="Published By:" HorizontalAlignment="Left" VerticalAlignment="Bottom" Foreground="Gray" FontWeight="Bold" FontSize="9" />
<TextBlock Text="{Binding PublishedBy}" HorizontalAlignment="Left" VerticalAlignment="Bottom" Foreground="Gray" FontWeight="Bold" FontSize="9" />
<TextBlock Text="{Binding DatePublished}" HorizontalAlignment="Left" VerticalAlignment="Bottom" Foreground="Gray" FontWeight="Bold" FontSize="9" />
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
# Page.xaml.cs:
if (!string.IsNullOrEmpty(_setLength))
{
StaffNews test = new StaffNews();
//assign new height to gridrow of NewsBody
if (_setLength.Contains("_3"))
test.StaffNewsBodyHeight.Equals(200);
}

I believe that StaffNews is representing one item in your list, right?
In that case, to assign a value to a property, use:
test.StaffNewsBodyHeight = 200;
to replace the last line of your snippet.
[P.S. - StaffNewsBodyHeight is a dependency property defined in StaffNews, right?]