Develop Reference

UWP c# TreeView with icons example

Microsoft recently started supporting the TreeView for UWP. This page is a reference.
https://learn.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/tree-view
They display there an example with icons however they do not provide an example of how to do this.
Can anyone show an example of how to do this in XAML or programmatically?
Thanks in advance.

Ok, I copied the example (very bottom of the page) from the link provided by Depechie and replaced the DataTemplate with this code below and it worked. I am now able to see the Image.
<DataTemplate x:Key="TreeViewItemDataTemplate">
<Grid Height="44">
<StackPanel Orientation="Horizontal">
<Image x:Name="TreeIcon" Width="16" Height="16" Source="Assets/folder.png" Margin="0,0,10,0">
<Image.FocusVisualPrimaryBrush>
<ImageBrush/>
</Image.FocusVisualPrimaryBrush>
</Image>
<TextBlock
Text="{Binding Content.DisplayName}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Style="{ThemeResource BodyTextBlockStyle}"/>
</StackPanel>
</Grid>
</DataTemplate>

C# uwp change "Splitview.Content" in MVVM

To be honest I somehow have a hard time with MVVM.
To be more exact I have a hard time with creating/changing pages in MVVM.
This is my MainPage containing my SplitView:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<!--#region Splitview-->
<Grid.RowDefinitions >
<RowDefinition Height="Auto" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<RelativePanel >
<Button
FontFamily="Segoe MDL2 Assets"
Content=""
FontSize="30"/>
</RelativePanel>
<SplitView Grid.Row="1"
x:Name="SplitView"
DisplayMode="CompactOverlay"
IsPaneOpen="False"
CompactPaneLength="49"
OpenPaneLength="160"
PaneBackground="DarkGray"
>
<SplitView.Pane>
<StackPanel>
<ListBox SelectionMode="Single"
x:Name="lbHamburgerMenue"
Background="Gray"
HorizontalAlignment="Left">
<ListBoxItem Margin="0,5,0,2.5"
Background="DarkGray">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets"
Text=""
FontSize="30"
VerticalAlignment="Center"/>
<TextBlock Margin="15,0,0,0"
Text="Home"
FontSize="20"
VerticalAlignment="Center"/>
</StackPanel>
</ListBoxItem>
<ListBoxItem Margin="0,2.5,0,2.5"
Background="DarkGray">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets"
Text=""
FontSize="30"
VerticalAlignment="Center"/>
<TextBlock Margin="15,0,0,0"
Text="New Movie"
FontSize="20"
VerticalAlignment="Center"/>
</StackPanel>
</ListBoxItem>
</ListBox>
</StackPanel>
</SplitView.Pane>
<SplitView.Content>
<!--#endregion-->
<!--#region content area-->
<Grid Grid.Row="1" Grid.Column="1" >
</Grid>
</SplitView.Content>
</SplitView>
</Grid>
For the Content I am kinda lost.
How do I get a View displayed when another ListBox.Item gets selected?
I know I need a Frame and inside that Frame the View has to be, but I would like some help in that regard because I am stuck here. (or with views in MVVM in general).

Yes, you are correct on your first assumption. You need to replace your GridView in the SplitView.Content section with a Frame. Then when you want to navigate to a particular view, you call Frame.Navigate.
For MVVM to keep your main page ViewModel from having intimate knowledge of your views, you can define a NavigationService that encapsulates page and view structure and the view types.
Here is a good article about the basics of MVVM and building a NavigationService: https://msdn.microsoft.com/en-us/magazine/jj651572.aspx (go to 'Setting up Navigation' section).
Another great description from StackOverflow: Navigating to a new page from the View Model in Windows Phone 8.1 universal app.

Due to "not understanding everything quite right" I ended up with a "bad" solution - works fine, but should be much less code/work.
This helped me very much understanding switching between Views! And I ended up using it.
Sadly I could not find a good tutorial to just change the <SplitView.Content> so I "Copy & Paste" it on every View.

Add Buttons and a Textblock With Each Binded Image

I'm developing an UWP app and i'm trying to add two buttons and a textblock for each image that binded.
I'm binding the images in XAML like this; (Updated with the full code)
<GridView Name="display"
Margin="30,100,30,5"
Foreground="#FFFFFF"
IsItemClickEnabled="True"
ItemClick="display_ItemClick"
ItemsSource="{Binding}">
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Image Width="240"
Height="240"
Source="{Binding Path=Image}" />
<StackPanel Name="buttonPanel"
Orientation="Horizontal"
Margin="0,-45,10,0"
HorizontalAlignment="Center">
<Button Name="button_minus"
Content="-"
Width="40"
Height="30"
Click="eksi_click"
FontWeight="Bold">
<Button.Background>
<ImageBrush ImageSource="Assets/btn2.png" Stretch="Fill" />
</Button.Background>
</Button>
<Border Background="White" CornerRadius="10" Height="30">
<TextBlock x:Name="popupNumber"
Width="50"
Height="25"
Margin="0,6,0,0"
Text="{Binding Path=numberOfCopy}"
TextAlignment="Center">
</TextBlock>
</Border>
<Button Name="button_plus" Content="+" Width="40" Height="30" Click="artı_Click" FontWeight="Bold">
<Button.Background>
<ImageBrush ImageSource="Assets/btn2.png" Stretch="Fill" />
</Button.Background>
</Button>
</StackPanel>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
I added a stackpanel that contains the Buton-TextBlock-Button format in the seciton of code that i commented out. When i do this, some buttons are not working and i don't actually know is it the best way to do my task.
When i launch the program, some buttons are not available to click. I can see them in the UI but i can't click them. The most awkward thing is only in a specific area on the UI, buttons are unavailable.
My click events are just fine, i have some binding issues, i am wondering is it the proper way to to something like that. Is it the way i am using causes the binding problem?
In in each TextBlock the values should be different for each image and i can't access buttons and textblocks in .cs file because they are in DataTemplate. So i might be doing this in a wrong way.
So do you have any solutions for adding buttons and textblocks for each binded image in Datatemplate? I'm not sure my way is the best way.
Any help would be greatly appreciated.
Thanks.

Create control instance in WPF

I want to load multiple images inside a wrappanel, for each image I show a thumbnail and some image details with this code
<Border BorderThickness="1" BorderBrush="#FFD0D1D7" Padding="5" Margin="10,10,0,0">
<StackPanel Orientation="Horizontal">
<!--image and dimensions-->
<Grid Width="88" Height="55">
<Image Source="C:\img1.jpg" Width="88" Height="55"/>
<TextBlock Background="#B2000000" Foreground="White" Height="16" TextAlignment="Center" VerticalAlignment="Bottom">1280x1024</TextBlock>
</Grid>
<!--name, type and size-->
<StackPanel Orientation="Vertical" Margin="5,0,0,0" VerticalAlignment="Center">
<TextBlock Margin="1" Foreground="#FF787878">img13.jpg</TextBlock>
<TextBlock Margin="1" Foreground="#FF787878">Type: JPEG</TextBlock>
<TextBlock Margin="1" Foreground="#FF787878">Size: 321 KB</TextBlock>
</StackPanel>
</StackPanel>
</Border>
But the images are loaded at runtime, and I need some way to create instances of the above code to show the image, dimensions, name, type and size
I tried this solution https://stackoverflow.com/a/4991028/962284
StringBuilder sb = new StringBuilder();
// use xaml to declare a button as string containing xaml
sb.Append(#"<Border BorderThickness='1' BorderBrush='#FFD0D1D7' Padding='5' Margin='10,10,0,0'>
<StackPanel Orientation='Horizontal'>
<!--image and dimensions-->
<Grid Width='88' Height='55'>
<Image Source='C:\img1.jpg' Width='88' Height='55'/>
<TextBlock Background='#B2000000' Foreground='White' Height='16' TextAlignment='Center' VerticalAlignment='Bottom'>1280x1024</TextBlock>
</Grid>
<!--name, type and size-->
<StackPanel Orientation='Vertical' Margin='5,0,0,0' VerticalAlignment='Center'>
<TextBlock Margin='1' Foreground='#FF787878'>img13.jpg</TextBlock>
<TextBlock Margin='1' Foreground='#FF787878'>Type: JPEG</TextBlock>
<TextBlock Margin='1' Foreground='#FF787878'>Size: 321 KB</TextBlock>
</StackPanel>
</StackPanel>
</Border>");
FrameworkElement thumb = (FrameworkElement)System.Windows.Markup.XamlReader.Parse(sb.ToString());
ThumbnailContainer.Children.Add(thumb);
but I get the following error
I also tried with styles, but styles doesnt support multiple parameters (to specify the textblocks: dimensions, size, name, type and size) just "TemplateBinding Tag" for 1 value
What can I do to create instances of the first code to show multiple images at runtime?

Wow. That so looks like the hard way to do things. Time to embrace WPF and XAML.
I had a post about this exact same thing that wasn't quite finished. I took time to finish it for you. I even used your XAML snippet (well, a modified version of it) in the example, just for you.
http://www.wpfsharp.com/2012/10/23/displaying-images-from-a-folder-with-details-in-wpf/
Clemens is correct in his comment to use an ItemsControl.

Yes your approach is wrong and you should be doing this some other way but to get your code snippet to work try adding xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\" to your Border element in the string you are building. I suspect that is the error.

Grid with an image, textblock, and rectangle, inside a listbox not showing up exactly right

So I have this Xaml inside a ListBox Item Template:
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Height="22" Width="Auto">
<Image Margin="-2,0,0,0" Source="{Binding Path=ADsPath, Converter={StaticResource ImxConverter}}" HorizontalAlignment="Left" Width="22" />
<TextBlock Margin="20,3,0,0" Text="{Binding Path=DisplayValue}" Width="Auto" />
<Rectangle Fill="White" Stroke="White" Margin="-2,0,-2,0.5" VerticalAlignment="Bottom" Height="1" Width="Auto" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
The idea is that the rectangle, provides a thin white line across the bottom of the entire ListBox Item; however, with the Xaml above, it only extends as long as the text, not to the full width of the ListBox.

Setting your width to Auto basically tells it to only be large enough to fit everything inside. I think you need to set your Grid's HorizontalAlignment to Stretch for it to work properly.
Edit:
I did a small sample app. Here's how I would do what you are trying to do:
On your actual listbox, I would have the HorizontalContentAlignment property set to Stretch
and
I would change your Grid to a DockPanel:
<ListBox.ItemTemplate>
<DataTemplate>
<DockPanel Height="22" HorizontalAlignment="Stretch">
<Rectangle Fill="White" Stroke="White" Margin="-2,0,-2,0.5" DockPanel.Dock="Bottom" Height="1"/>
<Image Margin="-2,0,0,0" Height="20" DockPanel.Dock="Left" Width="22" />
<TextBlock Margin="20,3,0,0" Text="Daniel Manning" DockPanel.Dock="Left"/>
</DockPanel>
</DataTemplate>
</ListBox.ItemTemplate>

Have you tried removing Width="Auto"? Auto is saying "only make me as big as I need to be" which, in your case, is determined by the length of the text. The default is "Stretch" which means "hey container, do me a favor and make me as wide as you are".