Empty collection bound to LongListSelector cause incorrect view of page - xaml

I have Windows Phone 8 page which has a number of controls on it, some of them are LongListSelector controls. If all collections have content everything is displayed correctly.
But if any of the collections bound to the lists are empty all controls below them on the page disappear, i.e. the page looks to be truncated as lots of things are missing.
If I add code to make sure to add at least on item to each collection the page display correctly.
The databinding is done using C#, as shown below.
XAML
<phone:LongListSelector Grid.Row="3" x:Name="PicturesGrid">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Image Source="{Binding Filename}" />
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
C#
PicturesGrid.ItemsSource = App.ViewModel.SelectedBird.Pictures;
Update: I have noticed that there is a scrollbar present, but however much I scroll I never get down to the bottom.

Related

XAML: MouseLeftButtonUp only fires when clicking text, not whitespace

I have a list box (in Silverlight) that uses a DataTemplate for the ItemTemplate. The DataTemplate is defined like this:
<DataTemplate>
<StackPanel Orientation="Horizontal"
MouseLeftButtonUp="RoleStackPanel_MouseLeftButtonUp"
Tag="{Binding}">
<TextBlock Name="roleItem"
Text="{Binding Path=DisplayValue, Mode=TwoWay}"/>
</StackPanel>
</DataTemplate>
I have found that my event RoleStackPanel_MouseLeftButtonUp only fires if any text displayed in the TextBlock is clicked. If the user clicks any whitespace in the item to the right of the text, the event does not fire. So lets say the control is 300px wide but only has the word "Admin" in the item, you MUST click "Admin" and not to the empty whitespace to the right.
How can I make it so the events fires wherever I click in the item, on text or whitespace?
So a couple quick considerations to get you sorted.
a.) The area of your panel does not have HitTestVisibility by default. This is by design and intentional. To get your event to fire for the parent simply add the property of IsHitTestVisible="True" or provide a Brush for the panel via Background="Transparent" to it to invoke HitTestVisibility.
b.) A StackPanel will only consume the space required by its children. If you wish to provide a large area for a user to hit like you describe than swap the StackPanel for Grid which should consume whatever space is made available by its parent. Same rules of HitTestVisibility apply.
<DataTemplate>
<Grid IsHitTestVisible="True"
MouseLeftButtonUp="RoleStackPanel_MouseLeftButtonUp"
Tag="{Binding}">
<TextBlock Name="roleItem"
Text="{Binding Path=DisplayValue, Mode=TwoWay}" />
</Grid>
</DataTemplate>
Hope this helps, cheers!

ScrollViewer Issue with StackPanel in Windows Phone 8

I put StackPanel into ScrollViewr, When scrolling to last item it returns back to its old position.
<ScrollViewer Margin="0,0,0,20">
<StackPanel>
//Textblocks and Textboxes ...
</StackPanel>
</ScrollViewer>
After search i found that:
ItemsControl, VirtualizingStackPanel and ScrollViewer height
I changed my code to:
<StackPanel>
//Textblocks and Textboxes ...
</StackPanel>
<ScrollViewer>
<VirtualizingStackPanel />
</ScrollViewer>
I can't set CanContentScroll="True" as i can't find it.
Also make exception:
System.InvalidOperationException: A VirtualizingPanel is not nested in an ItemsControl. VirtualizingPanel must be nested in ItemsControl to get and show items.
What must i do, to enable scrolling without returning back to its old position?
Regards,
After search again ...
I found this Post which solve the problem of Scrolling return to old position when open keyboard.
Scrolling page with keyboard shown
code after updates:
<ScrollViewer Height="500" VerticalAlignment="Top">
<StackPanel Height="700">
//Textblocks and Textboxes ...
</StackPanel>
</ScrollViewer>

DataTemplate does not show result of bound children

On my MainWindow.xaml page, I have the following code which works (where MyWord is a string)
<ContentControl Content="{Binding MyWord}" />
I'm playing with DataTemplates and trying understand them. So, I want to reference a DataTemplate from within my ContentControl. The DataTemplate should contain a TextBlock which binds to my string. I updated my code
<ContentControl ContentTemplate="{StaticResource ViewsTemplate}" />
And in my ResourceDictionary I add
<DataTemplate x:Key="ViewsTemplate">
<TextBlock Text="{Binding MyWord}" />
</DataTemplate>
This produces no text on screen at all. I even tried
<ContentControl Content="{Binding MyWord}" ContentTemplate="{StaticResource ViewsTemplate}" />
and still no result on screen.
I can't work out why can any one give some advice please.
Thank you
The ContentControl still needs to have some content bound to it.
<ContentControl ContentTemplate="{StaticResource ViewsTemplate}" Content="{Binding MyWord}" />
Would work, but then you'd need to change your data template because it expects to be able to find MyWord which of course it won't be able to, so you'd want to use just {Binding} instead.
Alternatively, bind the ContentControl's Content to {Binding} - the current DataContext of its parent - and leave the template as it is.

ListViewItems Animation no longer working

I have a ListView in my XAML that contains multiple thumbnail images, after selecting some pictures with a Picker. My issue is that, I have changed the item panel template like below, and now the animations for adding of deleting an item, simply won't work. The items just pop in or disappear...
Here's how my ListView look like :
<ListView x:Name="ThumbnailsListView"
ItemTemplate="{StaticResource ImageTemplate}"
ItemsSource="{Binding Images}"
SelectionMode="Multiple"
SelectionChanged="OnThumbnailsSelectionChanged">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal" >
<WrapGrid.ChildrenTransitions>
<TransitionCollection>
<ContentThemeTransition/>
</TransitionCollection>
</WrapGrid.ChildrenTransitions>
</WrapGrid>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
What could be wrong? If I cut down the part with the ItemsPanelTemplate the animations are OK but the visual effect is not the one desired.
I wish that items would fill the panel horizontally and then proceed to the next line.
You need to get other transitions in your ChildrenTransitions collection, like AddDeleteThemeTransition.

Xaml, How to bind a list of buttons over an image in different coordination

For a windows 8 Apps, i need to put a list of buttons over an image. Each button has CoordinateX and CoordinateY properties. I use a gridView to bind to the list of buttons.
I need to have the result as below:
Here is my code:
<Grid HorizontalAlignment="Left" VerticalAlignment="Top" >
<Canvas>
<Image Source="ms-appx:///Assets/red.png" Stretch="None" ></Image>
<GridView ItemsSource="{Binding Buttons}"
SelectionMode="None" IsSwipeEnabled="false" IsItemClickEnabled="True" ItemClick="Button" Padding="0">
<GridView.ItemTemplate>
<DataTemplate>
<Button Width="194" Height="51" Background="Gray" Canvas.Left="{Binding CoordinateX}" Canvas.Top="{Binding CoordinateY}"></Button>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Canvas>
</Grid>
But this is what i get after running the app:
Ites Likely that at runtime before the X and Y co-ordinates can be set for the items within the GridView, the GridView itself has its properties applied.
Since
1) the GridView is intended to be used for oganization control
and
2) you havent forced the Grid to fill the view space
what you're left with is a GridView that acts as it wishes and limits the ability of its items to conform to your style, should the style attempt to force the items collection to live outside the bounds of the control.
You could try to set the GridView's Horizontal Alignment property but even if it happens to work, its probably a better bet to use a less organized content control like the more basic ItemsPresenter.
Which ever control you end up using... make sure to check for /set the HorizontalContentAlignment & VerticalContentAlignment properties if they exist.