Develop Reference

Is it possible to set UserControl always topmost over the app?

I'm making FeedBack option in my WPF app. The main window has TabControl and statusbar below. Statusbar has a button, which shows FeedBackView with animation.
So, FeedBackView is not a window, it's a UserControl, which contains in Canvas Border.
The app has some options, which open other modal windows, so in that moment FeedBack form is inaccesible. I've tried to set Panel.ZIndex = 1 and that didn't help. So is there any way to set the form super topmost within the app?
<UserControl x:Class="UPR.Wpf.App.Views.StatusBarContentView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:v="clr-namespace:UPR.Wpf.App.Views.FeedBack"
xmlns:vm="clr-namespace:UPR.Wpf.App"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800" Loaded="UserControl_Loaded">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="../../Styles/Buttons.xaml"/>
</ResourceDictionary.MergedDictionaries>
<BooleanToVisibilityConverter x:Key="xBooleanToVisibilityConverter"/>
</ResourceDictionary>
</UserControl.Resources>
<Canvas>
<Button Name="FeedBackButton"
Click="FeedBackButton_Click"
Loaded="FeedBackButton_Loaded"
BorderThickness="0.5"
BorderBrush="Gray"
Foreground="White"
FontWeight="Bold"
FontSize="15"
Height="32"
Canvas.Bottom="-17"
Canvas.Right="-150">
</Button>
<Border BorderBrush="Gray"
Panel.ZIndex="1"
BorderThickness="2"
Name="border"
Margin="-350,0,-178,-9"
Background="White"
Canvas.Bottom="24"
Canvas.Right="-5"
SizeChanged="border_SizeChanged">
<v:FeedBackView/>
</Border>
</Canvas>
</UserControl>

WPF page content not setting to window's size

I made a WPF application in which. I placed a rectangle. The page is covering whole window but the size(width) of rectangle is not equal to the page.
here is the pic.
here is the source code of my application:
<Page x:Class="TestWpfApplication.Page1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:TestWpfApplication"
mc:Ignorable="d"
d:DesignHeight="350" d:DesignWidth="525"
Title="Page1" Background="#FF7ACBBC" ShowsNavigationUI="False">
<Grid>
<Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="100" Stroke="Black" VerticalAlignment="Top" Width="525"/>
<Label x:Name="label" Content="Heading" HorizontalAlignment="Left" Margin="222.006,25,0,0" VerticalAlignment="Top" FontFamily="Tahoma" FontSize="22"/>
<TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="160,155,0,0" TextWrapping="Wrap" Text="And rest of the content goes here" VerticalAlignment="Top" FontFamily="Tahoma" FontSize="14"/>
</Grid>
And
<Window x:Class="TestWpfApplication.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:TestWpfApplication"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<local:Page1/>
</Grid>
At last App.xaml
<Application x:Class="TestWpfApplication.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TestWpfApplication"
StartupUri="page1.xaml">
<Application.Resources>
</Application.Resources>
Please help me....

Set SizeToContent Property of Window to SizeToContent="WidthAndHeight"
SizeToContent

Page1.Xaml.cs:
public Page1()
{
InitializeComponent();
this.SizeToContent = SizeToContent.WidthAndHeight;
}
For more Info, See Window.SizeToContent Property

I don't know why you specified size parameters for rectangle and expect it to fit your page's size. Just remove all these parameters and it will stretch.
<Rectangle Fill="#FFF4F4F5"/>

WPF Extended Toolkit Control in Custom Control not pulling through to form?

I am using the Xceed Extended WPF Toolkit for the Integer Up Down Control. I have installed this via Nuget.
I have the integrated into a custom control which contains other normal textboxes and button etc.
This custom control I then put in a tab control on a Window. Everything shows correctly apart from this IntegerUpDown which shows as an empty box. (It is fine when looking at the custom control in design)
I have added the namespace to both the control and window so am not sure what the problem is. Everything is inside one project so I don't think references are a problem.
Any ideas of what I could be missing?
Control XAML:
<Label Grid.Row="3" Content="Quantity of Tickets:" VerticalAlignment="Center"></Label>
<xctk:IntegerUpDown Grid.Row="3" Grid.Column="1" Name="numTickets"></xctk:IntegerUpDown>
Form XAML:
<TabItem Header="New Booking">
<Grid Background="#FFE5E5E5">
<btc:NewBooking></btc:NewBooking>
</Grid>
</TabItem>
Thanks,
Ryan

Here's a MCVE:
MainWindow:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication8"
x:Class="WpfApplication8.MainWindow"
mc:Ignorable="d"
Title="MainWindow" Height="300" Width="300">
<Grid>
<TabControl x:Name="tabControl" Margin="0">
<TabItem Header="TabItem 1">
<Grid Background="#FFE5E5E5">
<local:UserControl1></local:UserControl1>
</Grid>
</TabItem>
<TabItem Header="TabItem 2">
<Grid Background="#FFE5E5E5"/>
</TabItem>
</TabControl>
</Grid>
UserControl:
<UserControl x:Class="WpfApplication8.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
xmlns:local="clr-namespace:WpfApplication8"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<StackPanel>
<Label Grid.Row="3" Content="Quantity of Tickets:" VerticalAlignment="Center"></Label>
<xctk:IntegerUpDown Grid.Row="3" Grid.Column="1" Name="numTickets"></xctk:IntegerUpDown>
</StackPanel>
</Grid>
Both MainWindow and UserControl are at the same level in the project structure:
EDIT: One more thing, make sure your UserControl is fully contained by the MainWindow and you do NOT have something like this:
That would cause the IntegerUpDown look like an empty box, like you described.

XAML Reuse a block of markup

Consider I have multiple pages and I want to show the same "Header" in every page without copying & pasting it multiple times: it's very unmaintainable.
<!-- #region Header -->
<Grid Grid.Row="0">
<Rectangle Style="{StaticResource HeaderBackground}" />
<TextBlock
Style="{StaticResource PageTitle}"
Text="Page1" />
<Button
Content="Settings"
Command="{Binding GotoSettingsPage}" />
</Grid>
<!-- #endregion Header -->
What are the options to make this block of markup reusable? For example it would be nice to write something like this:
<MyHeader Grid.Row="0" PageTitle="Page1" />

A user control is an option.
MyHeader.Xaml:
<UserControl
x:Class="App1.MyHeader"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid>
<Rectangle Style="{StaticResource HeaderBackground}" />
<TextBlock x:Name="Title"
Style="{StaticResource PageTitleStyle}"
Text="" />
<Button Content="Settings"
Command="{Binding GotoSettingsPage}"/>
</Grid>
</UserControl>
MyHeader.Xaml.cs:
using Windows.UI.Xaml.Controls;
namespace App1
{
public sealed partial class MyHeader : UserControl
{
public MyHeader()
{
this.InitializeComponent();
}
public string PageTitle
{
get { return Title.Text; }
set { Title.Text = value ?? ""; }
}
}
}
MainPage.Xaml:
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<local:MyHeader PageTitle="Page 1"/>
</Grid>
</Page>

Last component of User Control doesn't fill the available space on the hosting grid

I am working on a C# wpf project and I am having an issue. I have a Main Window which hosts a grid. This grid hosts a User Control and the User Control hosts 3 DockPanels in a 3 column layout.
The 3 columns are adjustable via a grid splitter which is working however, the right hand side column isn't filling the available space of the Main Window grid.
Below is the XAML of my Main Window hosting the user control:
<Window x:Class="Boardies_Email_Client.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Boardies_Email_Client"
mc:Ignorable="d"
Title="MainWindow" Height="350" WindowStartupLocation="CenterScreen" ResizeMode="CanResizeWithGrip" WindowState="Maximized">
<Grid>
<Grid x:Name="GridHost" Margin="0" Background="#FFF3FF00"/>
<StatusBar Height="24" VerticalAlignment="Bottom"/>
</Grid>
</Window>
Below is the XAML for the User Control
<UserControl x:Class="Boardies_Email_Client.EmailClient"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Boardies_Email_Client"
mc:Ignorable="d"
d:DesignHeight="505">
<Grid HorizontalAlignment="Left" Width="1120">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="92*"/>
<ColumnDefinition Width="121*"/>
<ColumnDefinition Width="87*"/>
<ColumnDefinition Width="225*"/>
<ColumnDefinition Width="134*"/>
<ColumnDefinition Width="116*"/>
<ColumnDefinition Width="345*"/>
</Grid.ColumnDefinitions>
<DockPanel Background="#FFEC1717" Grid.ColumnSpan="2">
<Label x:Name="label" Content="My Label" Margin="0,0,0,460" Width="175"/>
</DockPanel>
<GridSplitter x:Name="gridSplitter" HorizontalAlignment="Left" Width="5" Grid.Column="2"/>
<DockPanel LastChildFill="False" Margin="5,0,0,0" Background="#FF5DFF00" Grid.Column="2" Grid.ColumnSpan="3"/>
<GridSplitter x:Name="gridSplitter1" HorizontalAlignment="Left" Width="5" Grid.Column="5"/>
<DockPanel Grid.Column="5" Margin="5,0,0,0" Background="#FF0A00E2" Grid.ColumnSpan="2"/>
</Grid>
</UserControl>
Below is a screenshot showing the problem
The red, green and blue are the dock panels separated by grid splitters. The yellow is the background colour of the the grid of the main window hosting the user control, the blue panel should be filling up the available space of the yellow but I can't see why it isn't.
I haven't hard set any widths that I can find.

#Boardy
I ran your code.
The splitting of the UserControl and organization of the Grid are fine.
But you set the width to a fixed size :
<UserControl ...>
<Grid HorizontalAlignment="Left" Width="1120">
If you remove the fixed size, everything is fine, the control takes the size of the window and you don't see other background (yellow or right) on the right for sizes larger than 1120 :
<UserControl ...>
<Grid >
Regards