Develop Reference

Restyling UWP Toolkit Expander Arrow

I'm trying to restyle the Expander control from the Windows Community Toolkit, changing the default ">" symbol to a filled arrow (kind of like a Play button). Following the accepted answer in this question, I copied the default style from the Community Toolkit github repo, and pasted it into a ResourceDictionary (named CustomStyles.xaml), then changed the FontIcon Glyph property from  to . I've referenced that ResourceDictionary in the Page.Resources section, and then bound the new style to the Expander's HeaderTemplate property with a StaticResource reference. Everything should work, but something is causing it to fail.
The exception being thrown is of no help either, as the error displays the message Failed to assign to property 'Microsoft.Toolkit.Uwp.UI.Controls.HeaderedContentControl.HeaderTemplate'. The text associated with this error code could not be found.
Can someone help with this please?
MainPage.xaml
<Page
x:Class="SharpFTP.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:SharpFTP"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:toolkit="using:Microsoft.Toolkit.Uwp.UI.Controls"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="CustomStyles.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Page.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" MinHeight="40" />
</Grid.RowDefinitions>
<StackPanel x:Name="itemsPanel" Grid.Column="0" Grid.Row="0">
<toolkit:Expander Header="Favorites" ExpandDirection="Down" HeaderTemplate="{StaticResource expanderFullArrowStyle}">
</toolkit:Expander>
<TextBlock Text="Favorites" />
<StackPanel Orientation="Horizontal">
<TextBlock Text="Connected to " Style="{ThemeResource SubtitleTextBlockStyle}" Foreground="LightGray" />
<TextBlock Text=" 10.3.12.128" Style="{ThemeResource SubtitleTextBlockStyle}" Foreground="White"/>
</StackPanel>
<AppBarSeparator Width="{Binding ActualWidth, ElementName=itemsPanel}" Height="2" Foreground="LightGray" />
</StackPanel>
</Grid>
ResourceDictionary XAML
I've included only the modified portion as the full style is 300 lines long. The full default Expander style can be found here
<FontIcon x:Name="Arrow" Margin="12" FontFamily="Segoe MDL2 Assets" FontSize="12"
Glyph="" RenderTransformOrigin="0.5,0.5">
<FontIcon.RenderTransform>
<RotateTransform />
</FontIcon.RenderTransform>
</FontIcon>

The cause of your error should be a type mismatch.
You have modified the default style of Expender, then expanderFullArrowStyle should not be used on HeaderTemplate. Please try this:
<toolkit:Expander Header="Favorites" ExpandDirection="Down" Style="{StaticResource expanderFullArrowStyle}">
</toolkit:Expander>

Why is my DataGrid going off screen no matter what solution I try?

I am new to C# and WPF trying to get what I should think is a simple thing, but it doesn't work.
I have a data grid being populated by SQL, and no matter what I try, I can't get the Height of the DataGrid to stay within the window. It always just extends down. I want it to be dynamic to the window size.
My very simple code is below, or at least this most recent iteration.
<Page x:Class="TMSMaintenance.PaymentError"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TMSMaintenance"
Title="PaymentError">
<!--<DataGrid Name="MydataGrid" CanUserAddRows="False" SelectionMode="Single" />-->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<DockPanel Grid.Row="0" VerticalAlignment="Stretch" >
<DataGrid x:Name="MydataGrid"
VerticalAlignment="Stretch"
MinHeight="100"
VerticalScrollBarVisibility="Auto" VerticalContentAlignment="Stretch">
</DataGrid>
</DockPanel>
</Grid>
</Page>
I have tried wrapping in a ScrollView - it didn't work. I tried setting the Height by binding it to the window - it didn't work. I have tried the Grid.RowDefinition Height = "*" and "1*" - it didn't work. VerticalAlignment = "Stretch" also didn't work.
So what am I missing?
Edit: Maybe I should also say that this is on a Page file called within a frame tag. Not sure if it makes a difference here.
<StackPanel CanVerticallyScroll="True" CanHorizontallyScroll="True">
<!-- Navigation -->
<StackPanel Orientation="Horizontal" Margin="0,10,0,0">
<Button Content="Files Lookup" Margin="0,0,10,0"/>
<Button Content="Payment Error" Margin="0,0,10,0"/>
<Button Content="Carrier Maintenance" Margin="0,0,10,0"/>
<Button Content="Payment File" Margin="0,0,10,0" />
</StackPanel>
<ScrollViewer>
<Frame x:Name="MainFrame" NavigationUIVisibility="Hidden" ></Frame>
</ScrollViewer>
</StackPanel>

Get rid of that DockPanel. Grid is a much more flexible container for controls and you don't need to pack container into container at all. This alone should do the trick.
Good practice is to not use DockPanels at all. Never. Everything you can achieve with DockPanels can be achieved with Grids (with a bit more of coding, but it gives you more flexible solution and better maintainability of your code).
Also get rid of VerticalContentAlignment (not needed in case you described) and you don't need to define VerticalAlignment (nor HorizontalAlignment) to Stretch, since it's a default value of that property.
EDIT:
I haven't noticed the second sample of your code. Everything I wrote before still applies and will make your code better, but I think your problem is with nesting your Page in your main container (Window or whatever it is).
Try replacing:
<StackPanel CanVerticallyScroll="True" CanHorizontallyScroll="True">
<!-- Navigation -->
<StackPanel Orientation="Horizontal" Margin="0,10,0,0">
<Button Content="Files Lookup" Margin="0,0,10,0"/>
<Button Content="Payment Error" Margin="0,0,10,0"/>
<Button Content="Carrier Maintenance" Margin="0,0,10,0"/>
<Button Content="Payment File" Margin="0,0,10,0" />
</StackPanel>
<ScrollViewer>
<Frame x:Name="MainFrame" NavigationUIVisibility="Hidden" ></Frame>
</ScrollViewer>
</StackPanel>
To:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0"
Orientation="Horizontal"
Margin="0,10,0,0">
<StackPanel.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Margin" Value="0,0,10,0" />
</Style>
</StackPanel.Resources>
<Button Content="Files Lookup"/>
<Button Content="Payment Error"/>
<Button Content="Carrier Maintenance"/>
<Button Content="Payment File"/>
</StackPanel>
<Frame x:Name="MainFrame"
Grid.Row="1"
NavigationUIVisibility="Hidden" />
</Grid>
I have also simplified your styling on Buttons and I'd recommend you to change your Page to UserControl.

How to take value from a label from WPF Itemscontrols

good afternoon, I am writing this question to see if you can help me with a problem that I am having, it is probably easy to solve but I have not been able to make it work for days.
WPF programming I created an itemscontrols where I list a list with all the books I have, until there everything works perfect, my problem is that I want to do that when I press a button I take the value of the name of the book to use it in another part.
Then I leave the fragment of code that I have so that I can understand a little more
<StackPanel Name="stkMain">
<ItemsControl Name="itmCntrl">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center" ></WrapPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Name="stk">
<materialDesign:Card Width="300" Margin="10" VerticalAlignment="Stretch">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Name="img" Source="{Binding PhotoPath}" Height="300" Width="240" Stretch="Fill" Cursor="Hand" />
<Button Grid.Row="1" Grid.Column="1" Style="{DynamicResource MaterialDesignFlatButton}" Content="MORE"
HorizontalAlignment="Right" Margin="8" Click="Button_Click"/>
<Label x:Name="nan" Content="{Binding Name}"></Label>
</Grid>
</materialDesign:Card>
</materialDesign:TransitioningContent>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
As you can see for each item created I have an image, a label and a button, and basically what I can not do is that by pressing the button I take the value of the label
I hope I can lend a hand with this.
Thank you.

in a Button_Click method sender parameter is a Button which has DataContext ptoperty. DataContext is a single object with Name property:
// c#
Button b = (Button)sender;
object dc = b.DataContext;
//// cast dc to correct type, e.g.
// Book book = (Book)dc;
// string name = book.Name;

Can I duplicate a XAML/WPF window into a second window, like a picture-in-picture TV?

I've got an application with two XAML/WPF windows (derived from NavigationWindow), each window contains one parent UserControl, in which all child controls are placed. In one of the windows, I'd like to show the second window's content (really just the parent UserControl), in the manner like a picture-in-picture TV. In this way the user could view the first window, and see what is happening in the second window at the same time. Note, that I do not want two independent copies of this second window's UserControl (that would be easy), but to mirror the content of the second window in the first window.
This is vaguely similar to the Windows 7 Taskbar thumbnail previews, so I figure that it must be doable. Ideally, however, I'd also like to be able to interact with that window-in-a-window, in the same way as I would if I were to pull up the original window.
This is similar to this question, except that I'd like just a single window from the same application to be copied, instead of the whole desktop. Also similar to this question, but I need a bit more hand-holding, as I'm not super-familiar with C#/WPF. Some code snippets would be great.
Thank you in advance!

Use a visual brush. It will not be interactive, but that seems to suit your needs.
Paste this code into Kaxaml to see it in action.
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Triggers>
<EventTrigger RoutedEvent="Page.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard Storyboard.TargetName="sampleAnimation" Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(RotateTransform.Angle)">
<DoubleAnimation Duration="00:00:10" RepeatBehavior="Forever" To="-360">
<DoubleAnimation.EasingFunction>
<ElasticEase/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Page.Triggers>
<Page.Resources>
<VisualBrush x:Key="contentBrush" Stretch="None" Visual="{Binding ElementName=content}"/>
</Page.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock FontSize="25" Text="Content to mirror:"/>
<Grid
x:Name="content"
Grid.Row="1"
Margin="5"
Background="#11000000"
ClipToBounds="True">
<TextBox
x:Name="sampleAnimation"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="60"
FontWeight="Light"
Foreground="Red"
RenderTransformOrigin="0.5,0.5"
Text="Hello!">
<TextBox.RenderTransform>
<RotateTransform Angle="0"/>
</TextBox.RenderTransform>
</TextBox>
</Grid>
<TextBlock Grid.Row="2" FontSize="25" Text="Mirrored content using VisualBrush:"/>
<Grid Grid.Row="3" Background="{StaticResource contentBrush}">
</Grid>
</Grid>
</Page>

Use a visual brush as a fill on a rectangle.
You won't be able to interact with it though... but this is how preview thumbnails on the taskbar are accomplished.
<Grid HorizontalAlignment="Left" Name="A" Height="100" Width="100">
<Grid.Background>
<SolidColorBrush Opacity="0" Color="White"/>
</Grid.Background>
<!-- Contents -->
</Grid>
<Rectangle Name="RA" VerticalAlignment="Top" Width="100" Height="100" HorizontalAlignment="Left" Stroke="Black">
<Rectangle.Fill>
<!-- Creates the reflection. -->
<VisualBrush AutoLayoutContent="True" Visual="{Binding ElementName=A}" ViewboxUnits="RelativeToBoundingBox" ViewportUnits="RelativeToBoundingBox" Stretch="Fill" AlignmentX="Left" AlignmentY="Top" Viewport="0,0,1,1" Viewbox="0,0,1,1" TileMode="None">
</VisualBrush>
</Rectangle.Fill>
</Rectangle>
To interact, you'd have to bind all the properties to an identical screen, and use a layout transform to shrink it.
<StackPanel>
<Grid>
<TextBox Name="A"/>
</Grid>
<Grid>
<Grid.LayoutTransform>
<ScaleTransform CenterX=".5" CenterY=".5" ScaleX=".25" ScaleY=".25"/>
</Grid.LayoutTransform>
<TextBox Name="B" Text="{Binding ElementName=A, Path=Text, UpdateSourceTrigger=PropertyChanged}"/>
</Grid>
</StackPanel>

Windows 8 Metro: ListView ignores ItemTemplate

I'm following this tutorial, but I'm faced with a weird problem. There's a part that says:
In SplitPage.xaml, we also update the ItemTemplate property in itemListView to use our DefaultListItemTemplate resource instead of Standard130ItemTemplate, which is the default template. Here's the updated XAML for itemListView.
However, no matter what I do, it displays the list with the default template, which looks like this. Here's my code:
<DataTemplate x:Key="DefaultListItemTemplate">
<Grid HorizontalAlignment="Stretch" Width="Auto" Height="110" Margin="10,10,10,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- Green date block -->
<Border Background="{StaticResource BlockBackgroundBrush}" Width="110" Height="110" />
<ContentControl Template="{StaticResource DateBlockTemplate}" />
<StackPanel Grid.Column="1" HorizontalAlignment="Left" Margin="12,8,0,0">
<TextBlock Text="{Binding Title}" FontSize="26.667" TextWrapping="Wrap"
MaxHeight="72" Foreground="#FFFE5815" />
<TextBlock Text="{Binding Author}" FontSize="18.667" />
</StackPanel>
</Grid>
</DataTemplate>
...in Page.Resources, and
<ListView
x:Name="itemListView"
AutomationProperties.AutomationId="ItemsListView"
AutomationProperties.Name="Items"
TabIndex="1"
Grid.Row="1"
Margin="-10,-10,0,0"
Padding="120,0,0,60"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
IsSwipeEnabled="False"
SelectionChanged="ItemListView_SelectionChanged"
ItemTemplate="{StaticResource DefaultListItemTemplate}"/>
...in the page's Grid.
I've tried inlining the template and modifying Standard130ItemTemplate to no avail. Specifying a non-existent template throws a build error, though.
Any ideas what I could be doing wrong?

Apparently this was caused by the low resolution of my screen (1280x800). I didn't notice that the Split Page template defines the following VisualState for FilledOrNarrow:
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="ItemTemplate">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource Standard80ItemTemplate}"/>
</ObjectAnimationUsingKeyFrames>
I tried running it in the simulator and anything wider than it (such as 1366x768) works fine.