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

How do you bind Commands to jump lists LongListSelector in MVVM

I have the following xaml which is bound to a command... but I have no idea how I can pass information to the command to know which item was tapped:
<DataTemplate x:Key="OrganisationsItemTemplate">
<StackPanel VerticalAlignment="Top" Margin="5,0,0,0">
<Button ... Command = "{Binding LoadPage}">
<Grid Margin="0,0,5,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="67"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Background="Transparent">
<Border Background="White" BorderThickness="0" Width="62" Height="62" HorizontalAlignment="Left" Margin="0,0,0,5">
<Image Source="{Binding image.thumbnail_link}" Width="62" Height="62"></Image>
</Border>
</StackPanel>
<StackPanel Grid.Column="1" VerticalAlignment="Center" Background="Transparent">
<TextBlock Text="{Binding name}" HorizontalAlignment="Left" FontSize="30" VerticalAlignment="Center" Margin="0,0,0,5" />
</StackPanel>
</Grid>
</Button>
</StackPanel>
</DataTemplate>
These items in the jump list will hopefully open a new xaml page up which will show details specific to the item I chose. for example if I select Coca Cola as the organisation, it should then show the Detail.xaml which will list details on the Coca Cola organisation (fetched by the organisation ID).
If you recommend me using a hyperlinkbutton instead, do you have an example, If I put one in, I get the following error:
+ ExceptionObject {System.ArgumentException: Value does not fall within the expected range.} System.Exception {System.ArgumentException}
I assume that this is because I am nesting other elements within it... which, is kinda.. what I need to do?

You should pass a CommandParameter to your Command and give it the relevant object.
<Button Command="{Binding LoadPage}" CommandParameter={Binding ElementName=ParentItem Path=DataContext}">

Adding a List of Songs to a ListBox

i am trying to make my own mediaplayer for Windows Phone 7 and for the first step, i want to display a List of all songs in my media library to select them.
As i understood the ListBox, i just have to name the texblocks like the attributes of my class, which would be "Song"
<ListBox FontSize="30" Name="songListGUI" Height="330" Margin="0,120,0,0">
<Button Width="430" Height="60" BorderThickness="0" Margin="0" >
<Button.Content>
<StackPanel Orientation="Horizontal" Width="420" Height="auto">
<TextBlock Name="Name" Text="{Binding Name}" FontSize="22"></TextBlock>
<TextBlock Text=" - " FontSize="22"></TextBlock>
<TextBlock Name="Artist" Text="{Binding Artist}" FontSize="22"></TextBlock>
</StackPanel>
</Button.Content>
</Button>
</ListBox>
And now i think, i should handle my list of songs to the GUI and i try to do that with:
songListGUI.ItemsSource = songs;
But then i get a "InvalidOperationException" - Items collection must be empty before using ItemsSource.
I found several problems like this, and they all created a new class, to display this content. But i would like to stick with the song class, as it comes in quite handy :/
Do you know what i am doing wrong here?
edit:
i just found the solution. Don´t know exactly why, but this change in the .xaml made my da :):
<ListBox FontSize="30" Name="songListGUI" Height="330" Margin="0,120,0,0">
<ListBox.ItemTemplate>
<DataTemplate>
<Button Width="430" Height="60" BorderThickness="0" Margin="0" >
<Button.Content>
<StackPanel Orientation="Horizontal" Width="420" Height="auto">
<TextBlock Name="Name" Text="{Binding Name}" FontSize="22"></TextBlock>
<TextBlock Text=" - " FontSize="22"></TextBlock>
<TextBlock Name="Artist" Text="{Binding Artist}" FontSize="22"></TextBlock>
</StackPanel>
</Button.Content>
</Button>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Anybody could explan this to me?

ListBox is an ItemsControl. The content of an ItemsControl maps to the Items property. So by doing this:
<ListBox>
<SomeContent/>
</ListBox>
you're setting the Items property to <SomeContent/>. Since you aren't allowed to set the Items property and the ItemsSource property you get an exception.
When you do this:
<ListBox>
<ListBox.ItemTemplate>...</ListBox.ItemTemplate>
</ListBox>
You're not setting the content you're setting an attribute of the ListBox so there's no conflict.

Easiest way to access Texblock inside listbox itemtemplate

I have seen a lot of questions and answers with almost the same problem, but none of these answers arent working for me. Soo, my code is:
<ListBox ItemsSource="{Binding Avakuvaandmed}" x:Name="lboxandmed" HorizontalAlignment="Left" Height="552" VerticalAlignment="Top" Width="970" SelectionChanged="lboxandmed_SelectionChanged" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" x:Name="spanVärviSeda">
I HAVE TO GET VALUE OF THIS --> <TextBlock x:Name="IDbox" Width="50" Text="{Binding Id}"></TextBlock>
<TextBlock Width="130" Text="{Binding Nrmärk}"></TextBlock>
<TextBlock x:Name="txtKehtivus" Width="130" Text="{Binding Lõpp}"></TextBlock>
<TextBlock Width="130" Text="{Binding Eesnimi}"></TextBlock>
<TextBlock Width="130" Text="{Binding Perenimi}"></TextBlock>
<TextBlock Width="130" Text="{Binding Mark}"></TextBlock>
<TextBlock Width="130" Text="{Binding Mudel}"></TextBlock>
<TextBlock Width="130" Text="{Binding Aasta}"></TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And I have to get the value of the textblock named "IDbox".
Please can someone help me, or atleast give me a clue how.

Your code looks correct. If you want to access the Value of IDbox in code behind then you can do it by Avakuvaandmed.ElementAt(rowno).Id because you are binding Id to the IDBox. If you want to access the BoxId value in xaml. Then use binding as follows:
{Binding Avakuvaandmed[rowno],Path=Id}
You can also access Textblock value by using VisualTreeHelper class. You will need to go traverse all elements in ListBox.

Data binding in pivot TitleTemplate for Windows Phone

I must be missing something simple here...I am writing a Windows Phone 7 app and I have customized my pivot header to be the following:
<controls:Pivot Name="InfoPivot">
<controls:Pivot.TitleTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,0" VerticalAlignment="Top">
<Rectangle Fill="{Binding CategoryFill}" Height="50" Width="50" Margin="355,25,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Name="CategoryRect" />
<StackPanel Margin="-425,-14,0,0" Width="432">
<TextBlock x:Name="StationTitle" Text="{Binding StationTitle}" Margin="10,0,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
<TextBlock Name="LocationTitle" Text="{Binding LocationTitle}" TextWrapping="Wrap" Margin="12,0,0,20" Style="{StaticResource PhoneTextNormalStyle}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</controls:Pivot.TitleTemplate>
When I navigate to this page, I pass Station and Location as parameters, and in the OnNavigatedTo() for this page I try to set the StationTitle and LocationTitle. Unfortunately, I end up getting:
Error 2 The name 'StationTitle' does not exist in the current context
How should/do we go about accessing members in the Pivot TitleTemplate? Any help will be appreciated! Thanks.

Stop using the title template and binding to acheive this. Try this instead:-
<controls:Pivot Name="InfoPivot">
<controls:Pivot.Title>
<StackPanel Orientation="Horizontal" Margin="0,0,0,0" VerticalAlignment="Top">
<Rectangle Fill="{Binding CategoryFill}" Height="50" Width="50" Margin="355,25,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Name="CategoryRect" />
<StackPanel Margin="-425,-14,0,0" Width="432">
<TextBlock x:Name="StationTitle" Margin="10,0,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
<TextBlock x:Name="LocationTitle" TextWrapping="Wrap" Margin="12,0,0,20" Style="{StaticResource PhoneTextNormalStyle}"/>
</StackPanel>
</StackPanel>
</controls:Pivot.Title>
Then in code-behind:-
if (NavigationContext.QueryString.TryGetValue("Station", out station))
{
StationTitle.Text = station;
}
if (NavigationContext.QueryString.TryGetValue("LocationTitle", out locationTitle))
{
LocationTitle.Text = locationTitle;
}

Without seeing all of your code, this may be as simple as making the Name declaration consistent on your two TextBlocks.
Note, one is Name="", the other is x:Name="".

Defining the template inline worked for me, The TitleTemplate just wouldn't work.
<phone:Pivot>
<phone:Pivot.Title>
<TextBlock Margin="0"
Text="{Binding Exercise.Name}"
Style="{StaticResource MainTitleStyle}"/>
</phone:Pivot.Title>
</phone:Pivot>