We Keep Coding

Add an image/icon beside treenavigator items

I have a syncfusion treenavigator dropdown menu. Our client wants to add an icon per item in the first 2 drilldowned menus of the treenavigator. Given that the list of the items came from a deserialized json object, how do I map and inject the images without adding it in the json file? My colleague suggested to create an item template in code behind but I'm not sure how to do it.
P.S. Please do not put this on hold. It's hard to formulate a question if you can't fully understand what you need to ask. I'll try to answer any clarifications.
Thanks!

Please set the image paths in ViewModel only for the items you want to show images. You can try with the following code:
xmlns:navigation="using:Syncfusion.UI.Xaml.Controls.Navigation"
xmlns:primitives="using:Syncfusion.UI.Xaml.Primitives"
<navigation:SfTreeNavigator ItemsSource={Binding NavigatorItems}>
<navigation:SfTreeNavigator.ItemTemplate>
<primitives:HierarchicalDataTemplate ItemsSource="{Binding Models}" x:Key="Template">
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding ImageSource}" Width="18" Height="18"/>
<TextBlock Text="{Binding Header}" VerticalAlignment="Center" Margin="18 0 0 0"/>
</StackPanel>
</DataTemplate>
<primitives:HierarchicalDataTemplate.ItemTemplate>
<primitives:HierarchicalDataTemplate ItemsSource="{Binding Models}">
<DataTemplate>
<StackPanel Orientation="Vertical">
<Image Source="{Binding ImageSource}" Width="18" Height="18"/>
<TextBlock Text="{Binding Header}" VerticalAlignment="Center" Margin="18 0 0 0"/>
</StackPanel>
</DataTemplate>
<primitives:HierarchicalDataTemplate.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Image Source="{Binding ImageSource}" Width="18" Height="18"/>
<TextBlock Text="{Binding Header}" VerticalAlignment="Center" Margin="18 0 0 0"/>
</StackPanel>
</DataTemplate>
</primitives:HierarchicalDataTemplate.ItemTemplate>
</primitives:HierarchicalDataTemplate>
</primitives:HierarchicalDataTemplate.ItemTemplate>
</primitives:HierarchicalDataTemplate>
</navigation:SfTreeNavigator.ItemTemplate>
Note: Syncfusion.SfTreeNavigator.UWP and Syncfusion.SfSharedd.UWP assemblies are required.
Regards,
Jessie

Creating collections of arbitrarily positioned controls in WPF

I have a simple Border and Grid that is positioned within a Canvas container in WPF. The position of the control changes during runtime hence why it resides in the canvas.
The XAML for the control looks something like this:
<Border Name="PopupArea"
Width="130"
Height="150"
BorderBrush="Black"
BorderThickness="2"
CornerRadius="5">
<Border.Background>
<SolidColorBrush Opacity="0.5" Color="Black" />
</Border.Background>
<Grid>
<StackPanel>
<Border HorizontalAlignment="Center">
<Border.Effect>
<DropShadowEffect />
</Border.Effect>
<TextBlock FontWeight="Bold" Style="{StaticResource SmallWhiteFont}">HELLO WORLD</TextBlock>
</Border>
</StackPanel>
</Grid>
</Border>
However I now need to be able to create a Collection of the above control which I create and destory as required at runtime in code.
My questions are :
A. What is the best way to compose my XAML to create multiple instances of the above control through code? Do I just declare a ContentControl in the resources?
B. Assuming I am correct and a resource template is required. How do I actually use it to create multiple instances of the control in code?

Within XAML I would use an ItemTemplate.
Then I would bind ItemsSource to some observable collection on my viewmodel.
Here's an example taken from MSDN:
<ListBox Width="400" Margin="10"
ItemsSource="{Binding Source={StaticResource myTodoList}}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Path=TaskName}" />
<TextBlock Text="{Binding Path=Description}"/>
<TextBlock Text="{Binding Path=Priority}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
NOTE:
It is more common to define a DataTemplate in the resources section so it can be a reusable object.
<ListBox Width="400" Margin="10"
ItemsSource="{Binding Source={StaticResource myTodoList}}"
ItemTemplate="{StaticResource myTaskTemplate}"/>

ItemRealized event does not fire

I wanna create a infinite longlistselector, but my event ItemRealized does not fire. i have create view model so i can generate an observable collection, and everything sees to be working fine when i monitoring the main class, i'm sure that it is not empty, but my problem is that i can not populate the longlistselector
<phone:PhoneApplicationPage.Resources>
<vm:GoogleView x:Key="viewModel"/>
</phone:PhoneApplicationPage.Resources>
longlistselector
<phone:LongListSelector ItemRealized="m_ListBoxGoogle_ItemRealized" Name="m_ListGoogle" HorizontalAlignment="Center" Height="410" Margin="0,120,0,0"
ItemsSource="{Binding GoogleCollection}"
DataContext="{StaticResource viewModel}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<Button Tag="{Binding GoogleID}" Style="{StaticResource NoVisualTextButton }" toolkit:TiltEffect.IsTiltEnabled="True" Click="OnListBoxItemClick" Margin="-10,0,0,0">
<StackPanel Orientation="Horizontal" Margin="0,3,0,0" Height="auto" Width="450">
<Border BorderThickness="1" Width="62" Height="62" BorderBrush="#00aef0" Background="#00aef0">
<Image Height="60" Width="60" Source="{Binding GoogleImagePath}"/>
</Border>
<StackPanel Width="350" HorizontalAlignment="Center" Margin="12,0,0,0" >
<TextBlock Text="{Binding GoogleDisplayName}" TextWrapping="NoWrap" Style="{StaticResource PanoramaItemTextStyle }" FontSize="24" />
<TextBlock Text="{Binding GoogleObjectType}" TextWrapping="NoWrap" Style="{StaticResource PanoramaItemTextStyle }" FontSize="20" />
</StackPanel>
</StackPanel>
</Button>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
i'm really stuck guys, please help me

Try these things for I believe its a binding issue:
Debug and put a breakpoint in the GoogleView constructor and verify
it is being instantiated.
If it is being instantiated verify the data you are binding to exists within the class.
If everything instantiated, try binding to the collection as TwoWay binding mode.
If that doesn't work try binding to the data in another control to verify things are working properly.

listbox's item with dynamic height

I have a listBox, wich I fill from some collection. Each item of collection has some info: static name and picture, and dynamic content(text, photo or photos, etc). I want to change the listbox's item height for each item of collection. Height depends of content, if it has only text - item of listbox must have static (textblock for name, image for picture) and a textblock with text, and textblock's heigth must change acording to text (if it's 2-3 strings height will be min, if text fit in 15-20 strings - height of textblock must change accordind to strings), if item of collection include text and image - it must have static (textblock for name, image for picture), textblock for text, and image for image. Height of listbox's item must depend of textblock size and image size.
At this time, I have a listbox with static item's height, and want to make height dynamic.
here is one of my listbox's item
<local:NewsTemplateSelector.Photo>
<DataTemplate>
<Border
BorderBrush="Red"
BorderThickness="2"
Width="400"
Height="auto"
Margin="10">
<StackPanel Orientation="Horizontal" Width="400" Height="auto">
<Image
Source="{Binding SourceImage}"
Height="75"
Width="75"
Margin="0,-225,0,0" />
<Canvas Width="400">
<TextBlock
Text="{Binding SourceName}"
Foreground="Black"
FontSize="25"
TextWrapping="Wrap"
Height="55"
Width="326"
d:LayoutOverrides="VerticalAlignment, Height" />
<Image
Source="{Binding Photo[0].Big}"
Height="auto"
VerticalAlignment="Bottom"
HorizontalAlignment="Right"
Width="326"
Canvas.Top="69"/>
</Canvas>
</StackPanel>
</Border>
</DataTemplate>
</local:NewsTemplateSelector.Photo>
UPD: Tried
<local:NewsTemplateSelector.Photo>
<DataTemplate>
<Border
BorderBrush="Red"
BorderThickness="2"
Width="auto"
Height="auto"
Margin="10">
<Canvas Width="auto">
<Image
Source="{Binding SourceImage}"
Height="auto"
Width="auto"
HorizontalAlignment="Stretch" />
<TextBlock
HorizontalAlignment="Stretch"
Text="{Binding SourceName}"
Foreground="Black"
FontSize="25"
TextWrapping="Wrap"
Height="auto"
Width="auto"
MaxHeight="300"
MaxWidth="460" />
<TextBlock
HorizontalAlignment="Stretch"
Text="{Binding Texts}"
Foreground="Black"
FontSize="25"
TextWrapping="Wrap"
Height="auto"
Width="auto"
MinHeight="150"
MaxHeight="300"
MaxWidth="460" />
<Image
HorizontalAlignment="Stretch"
Source="{Binding Photo[0].Big}"
Height="auto"
MinHeight="150"
MaxHeight="300"
MaxWidth="460"
Width="auto"/>
</Canvas>
</Border>
</DataTemplate>
</local:NewsTemplateSelector.Photo>`
but photos superimposed on each other, and images with name SourseImage, also superimposed at the top of screen

Try by replacing all the hard coded properties with auto, like height=auto and width=auto.
If you want to fill the total row make the HorizontalAlignment=:stretch".
Make the textblock property TextWrapping="wrap" and MinWidth as fixed as you want.

you can use "auto" value for Height of ListBox in xaml code
<ListBox Height="auto">
</ListBox>

Different Object-Types in Grid- or ListView

I'm currently trying to figure out how to show different types of objects in a GridView, look at this Pic for example:
the last element on the right side is different than the other elements, so if i bind an observablecollection to the GridView, how can i say that the last element is shown up in anohter layout.
currently I'm using this XAML-Code
<GridView x:Name="startView" ItemsSource="{Binding}" Grid.Column="1" Grid.Row="2" SelectionMode="None" Width="Auto">
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock x:Name="DetailTitle" Height="74" Text="{Binding Title}" />
<Image x:Name="Image" Height="Auto" Width="Auto" Margin="0" Stretch="None" Source="{Binding LocalCoverUrl}" Visibility="Collapsed" />
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="2" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
and this Code in the Back:
ObservableCollection<Movie> recentlyStarted = await Api.RecentlyStarted(3);
startView.DataContext = recentlyStarted;
but I have currently no clue how to let the last element show up in a different style

The easy way would be to have the two types of object as different classes (e.g. MoviePicStyle + MoviePlainStyle. Then move your DataTemplate out of the GridView, so that each object is picked up by type,
e.g.
<Window.Resources>
<DataTemplate DataType="{x:Type ViewModel:MoviePicStyle}">
<StackPanel>
<TextBlock x:Name="DetailTitle" Height="74" Text="{Binding Title}" />
<Image x:Name="Image" Height="Auto" Width="Auto" Margin="0" Stretch="None" Source="{Binding LocalCoverUrl}" Visibility="Collapsed" />
</StackPanel>
<DataTemplate DataType="{x:Type ViewModel:MoviePlainStyle}">
...Different View...
</DataTemplate>
</Window.Resources>
<GridView...

Use template selector property of gridview and depending upon the type of object select the template. I did the same in my project. you need to write your own DataTemplateSelector.
I referred below link
http://babaandthepigman.wordpress.com/2012/02/08/datatemplateselector-winrt/