Develop Reference

Custom NavigationView Icons

I want to make custom colored Icons for NavigationView Items.
I added some code from old post as following.
<winui:NavigationViewItem x:Uid="Shell_Main" helpers:NavHelper.NavigateTo="views:MainPage" >
<winui:NavigationViewItem.Content>
<StackPanel Orientation="Horizontal">
<Image Source="/Assets/Icons/HomeIcon.png" Width="25" Height="25"/>
</StackPanel>
</winui:NavigationViewItem.Content>
</winui:NavigationViewItem>
The Change is OK in designer as The following Image .
But during execution, Nothing happned as in the following Image:
What's wrong?

But during execution, Nothing happned as in the following Image:
During the testing, you code is correct, and add image into NavigationViewItem is general way to custom navigation item icon. we have made sample, and it work as expect. It looks your project has debug problem. please try to clean your project or make a new project.

Resolved by removing the x:Uid From the menu Item AS shown below:
<winui:NavigationViewItem helpers:NavHelper.NavigateTo="views:MainPage" >
<winui:NavigationViewItem.Content>
<StackPanel Orientation="Vertical">
<Image Source="/Assets/Icons/HomeIcon.png" Width="45" Height="45" >
<ToolTipService.ToolTip>
<TextBlock x:Uid="Shell_Main" Text="temp"/>
</ToolTipService.ToolTip>
</Image>
</StackPanel>
</winui:NavigationViewItem.Content>
</winui:NavigationViewItem>
<winui:NavigationViewItem helpers:NavHelper.NavigateTo="views:ExcelToolsPage">
<winui:NavigationViewItem.Content>
<StackPanel Orientation="Vertical">
<Image Source="/Assets/Icons/HomeIcon.png" Width="45" Height="45" >
<ToolTipService.ToolTip>
<TextBlock x:Uid="Shell_ExcelTools" Text="temp"/>
</ToolTipService.ToolTip>
</Image>
</StackPanel>
</winui:NavigationViewItem.Content>
</winui:NavigationViewItem>
The problem Now is Make these Icons distributed along the whole pan vertically.

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.

Access XAML Control In DataTemplate From CodeBehind?

I have a control that I am unable to access in the codebehind, and I believe it is because it is defined in a DataTempalte.
The overall control is a slide show carousel. Each slide can be an Image or a MediaElement (video), the contents of which are defined in an ItemSource binding. The carousel is on a timer to switch from one slide to the next. Each time the slide changes I fire an event to that effect.
When I hit a slide with a video I'd like to stop the slide timer (done that) and start the video, which is where I've run into a problem. I can not access the MediaPlayer element Name from my codebehind. My assumption at this point is because it is a DataTemplate.
Is this assumption correct? If so, how can I get access to this control from the codebehind, or (more to the point) have it start playing when the slide comes up?
<ctrl:AutoScrollCarousel ...>
<ctrl:AutoScrollCarousel.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ctrl:AutoScrollCarousel.ItemsPanel>
<ctrl:AutoScrollCarousel.ItemTemplate>
<DataTemplate>
<Border x:Name="Border" VerticalAlignment="Center"
Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type UserControl},Mode=FindAncestor}}">
<Grid Background="White">
...
<Image Source="{Binding ContentImage}" Grid.Row="1" Grid.Column="1" Stretch="UniformToFill"
HorizontalAlignment="Center"
Visibility="{Binding ContentImage, Converter={StaticResource VisibilityConverter}}" />
<MediaElement Name="MediaPlayer" Source="{Binding ContentVideo}" Grid.Row="1" Grid.Column="1" Stretch="UniformToFill" LoadedBehavior="Play"
Visibility="{Binding ContentVideo, Converter={StaticResource VisibilityConverter}}" MediaEnded="MediaPlayer_MediaEnded" />
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Title}" Foreground="Black"
FontFamily="Segoe UI" FontWeight="Light" HorizontalAlignment="Left" FontSize="75" Margin="0" VerticalAlignment="Center" />
<TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding ContentHeadline}" Foreground="Black"
FontFamily="Segoe UI" FontWeight="Light" HorizontalAlignment="Left" FontSize="50" VerticalAlignment="Center"
TextWrapping="Wrap">
</TextBlock>
</Grid>
</Border>
</DataTemplate>
</ctrl:AutoScrollCarousel.ItemTemplate>
</ctrl:AutoScrollCarousel>

WPF provides a simple and straightforward way to access named elements that are generated from DataTemplates. It is explained in the MSDN article How to: Find DataTemplate-Generated Elements.
Assumed that your AutoScrollCarousel is derived from ItemsControl, you would get the ContentPresenter that is the container of an item like this:
AutoScrollCarousel carousel = ...
object item = ...
var contentPresenter =
carousel.ItemContainerGenerator.ContainerFromItem(item) as ContentPresenter;
From the ContentPresenter you would get the named element in the DataTemplate by means of the FindName method:
var dataTemplate = contentPresenter.ContentTemplate;
var mediaPlayer = dataTemplate.FindName("MediaPlayer", contentPresenter) as MediaElement;

I would normally recommend not to touch UIElements from code... but the MediaElement is a special case... maybe you should wrap the whole template inside a usercontrol (maybe with some custom DepProps) and that will give you better control over the whole thing.
Edit: Another approach would be to create a Behavior with a couple of properties (such as IsPlaying) and manipulate the mediaelement from there. Then you could use this behavior in the XAML of the DataTemplate, with no need for code behind or usercontrols.

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.