Add an image/icon beside treenavigator items - c#

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

Related

Trouble with multiple selection of a list box in wp8

I'm using ListBox to list a group of items and i want the user to select multiple items from the list. I tried it with the following code,
<ListBox x:Name="List" SelectionMode="Multiple" HorizontalAlignment="Left" Height="559" Margin="14,1,-1,0" VerticalAlignment="Top" Width="443" SelectionChanged="List_SelectionChanged_1">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Width="420" Height="60">
<TextBlock x:Name="tbName" Width="318" Foreground="{Binding color}" Height="35" FontSize="22" Text="{Binding Name}" Margin="-350,13,69,12" />
<Canvas x:Name="ContentPanelCanvas" Grid.Row="1" Background="Transparent" Margin="0,0,12,0">
<Line X1="0" Y1="00" X2="420" Y2="0" Stroke="Gray" StrokeThickness="0.3"/>
</Canvas>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
But still i didn't get a checkbox to select multiple items.
What is the problem?
I think it will be better if you use LongListMultiSelector from Windows Phone Toolkit
You can find code samples here. Also take a look of this question.

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.

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.

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>

Setting a WPF Image in XAML to a property

I have ListBox in my WPF project that gets set to a datasource of "MyObjectCollection".
I have managed to get the ListBox to display my collection, and each item to display two string properties from the object. The object also contains an Image, how do i get the image to display in the ListBox?
I am currently using the below code to bind to my DataSource
<UserControl.Resources>
<DataTemplate x:Key="CustomerTemplate">
<Border BorderThickness="2" BorderBrush="silver" CornerRadius="5" Padding="1"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid>
<Image Source="{Binding Artwork}" Tag="{Binding Artwork}" VerticalAlignment="Stretch" ></Image>
<TextBlock Text="{Binding Name}" Foreground="#515151"
FontSize="16" HorizontalAlignment="Stretch"
FontWeight="Bold" />
<TextBlock Text="{Binding Length}" Foreground="#515151" Margin="0,25,0,0"
FontSize="10" HorizontalAlignment="Stretch"
FontWeight="Bold" />
</Grid>
</Border>
</DataTemplate>
</UserControl.Resources>
Thanks,
Ben
It depends on the image type in your collection.
If it is a path string to a file or if it is a byte array.
You should use ValueConverter for your image binding.
Take a look at ValueConverter

Categories