Develop Reference

WPF ItemTemplate Causing ListBox Content Size Issue

In a WPF project, I have a ListBox that renders correctly if I manually insert items in XAML, e.g.:
<ListBoxItem>
<Grid Background="#7F271043" Width="200" Height="200">
<Grid.RowDefinitions>
<RowDefinition Height="110" />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="Logo-40p.png" HorizontalAlignment="Center" Margin="10,10,10,10" />
<TextBlock Grid.Row="1" Text="Test Item" Foreground="White" Margin="10,0,10,0" FontSize="16" VerticalAlignment="Center" />
<local:Rating Grid.Row="2" HorizontalAlignment="Left" Height="24" Margin="10,0,0,0" VerticalAlignment="Center" Width="130" SelectedValue="4" IsReadOnly="True" />
<TextBlock Grid.Row="2" Text="Free" Foreground="#FF969292" Margin="0,0,10,0" FontSize="14" HorizontalAlignment="Right" VerticalAlignment="Center" />
</Grid>
</ListBoxItem>
The bottom of the ListBoxItem looks like:
However, the moment I swap out <ListBoxItem> for:
<ListBox.ItemTemplate>
<DataTemplate>
Even if I keep everything else identical, it creates a sizing problem with my rating control that I'm unable to fix (doesn't respond to manual size or stretch settings):
Any thoughts on how to address this? Do ItemTemplate / DataTemplate do something that might cause a control to not respect the size manually set or set by the grid row it's in?

Managed to fix this - it seems that a manually defined ListBoxItem in XAML behaves differently from the output of an ItemTemplate / DataTemplate.
My rating user control had a set height and width specified that were overridden by the implementation XAML (height/width/stretch) inside a ListBoxItem but not inside a ItemTemplate / DataTemplate:
mc:Ignorable="d" Height="750" Width="4070" MouseLeave="UserControl_MouseLeave">
So I instead changed Height / Width to DesignHeight / DesignWidth to fix the issue:
mc:Ignorable="d" d:DesignHeight="750" d:DesignWidth="4070" MouseLeave="UserControl_MouseLeave">

How do i set the background image of a button in a WPF Application?

I cannot find the background-Image Property in the properties panel of the button, I have the images stored for each button in the root directory of my solution as Jpegs, the project is a WPF and I don't know how to set the image in the XAML or C# code. I am developing in Visual Studio 2017 Community Edition
All problems I have seen before are for different versions of Visual Studio, so I can't find the answer
*edit - i am trying to change the background image of a button at design time in the XAML editor, not create an onclick button to change a background image. So if i have this button in XAML:
<Button x:Name="keyBtn"
Content="Keyboard/Mouse"
HorizontalAlignment="Left" VerticalAlignment="Top"
Width="400" Height="800" FontFamily="Verdana"
Background="#FFB41717"
Margin="0,-31,0,0"/>
Which Part should I refer to in the ".background" property?

It is probably easier than you think..
Try this after you add the image to your project.
<Button x:Name="keyBtn"
HorizontalAlignment="Left" VerticalAlignment="Top"
Width="400" Height="800" FontFamily="Verdana"
Background="#FFB41717"
Margin="0,-31,0,0">
<Image Source="myImage.png" />
</Button>
Note that you need to remove the content since now the image is the content.
If you wish the text as well - you can try this:
<Button x:Name="keyBtn"
HorizontalAlignment="Left" VerticalAlignment="Top"
Width="400" Height="800" FontFamily="Verdana"
Background="#FFB41717"
Margin="0,-31,0,0">
<Grid>
<Image Source="myImage.png" Stretch="Fill" />
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="Keyboard/Mouse" />
</Grid>
</Button>
And there is another option - which might be exactly what you are looking for:
<Button x:Name="keyBtn"
Content="Keyboard/Mouse"
HorizontalAlignment="Left" VerticalAlignment="Top"
Width="400" Height="800" FontFamily="Verdana"
Margin="0,-31,0,0">
<Button.Background>
<ImageBrush ImageSource="myImage.png" Stretch="Fill" />
</Button.Background>
</Button>
But in that last option - you will have to remove the Background color as it is being replaced by the image.

C# application- how to display a website inside a xaml form?

I am trying to add a web browser to an existing C# application, but, having not used C# in about 6 years, I am quite unfamiliar with how it works.
The GUI for the application has been created using XAML, and I want to use this to add/ embed the web browser within the application, but I'm not sure how to do this.
I have the following script inside my WebBrowser.xaml class:
<Window x:Class="RiviamAgent.WebBrowser"
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:RiviamAgent"
mc:Ignorable="d"
Title="WebBrowser" Height="500" Width="500">
<Window.CommandBindings>
<CommandBinding Command="New" CanExecute="CommonCommandBinding_CanExecute" />
<CommandBinding Command="Open" CanExecute="CommonCommandBinding_CanExecute" />
<CommandBinding Command="Save" CanExecute="CommonCommandBinding_CanExecute" />
</Window.CommandBindings>
<DockPanel>
<ToolBarTray DockPanel.Dock="Top">
<ToolBar Header="File">
<Button Command="New" Content="New" ToolBar.OverflowMode="Always" />
<Button Command="Open" Content="Open" ToolBar.OverflowMode="Always" />
<Button Command="Save" Content="Save" ToolBar.OverflowMode="Always" />
</ToolBar>
<ToolBar Header="Edit" Margin="5.4,0,-5.4,0">
<Button Command="Cut" Content="Cut" ToolBar.OverflowMode="Always" />
<Button Command="Copy" Content="Copy" ToolBar.OverflowMode="Always" />
<Button Command="Paste" Content="Paste" ToolBar.OverflowMode="Always" />
</ToolBar>
<ToolBar Margin="9.2,0,-8.2,0">
<Button Command="Back" ToolTip="Return to the previous page"/>
<Image Source="C:\Users\elgan\workspace\browser\riviam_windows\Images\navigateBack.png" Width="20" Height="20" Margin="0,0,0,2.4" />
</ToolBar>
<ToolBar Margin="16.4,0,-16.2,0" >
<Button Command="Forward" ToolTip="Proceed to the next page" />
<Image Source="C:\Users\elgan\workspace\browser\riviam_windows\Images\navigateForward.png" Width="20" Height="20" />
</ToolBar>
</ToolBarTray>
<TextBox AcceptsReturn="True" />
<WebBrowser Name="browser" Navigating="www.google.com"/>
<TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="12">
Web page
</TextBlock>
</DockPanel>
and this is currently showing a blank page, with a toolbar at the top containing 'File' & 'Edit' menus, as well as 'Back' and 'Forward' navigation buttons.
I am now trying to display the contents of a website in the rest of the page, but I'm not sure how to do this.
In the last couple of lines that I have written, I am trying to get Google to display in the main area of the GUI (i.e. below the menus and navigation buttons), but at the moment, nothing is being displayed there, other than the text, "Web page".
Can anyone tell me why this is? How can I get the form to display Google or any other website? Thanks in advance.

Try changing:
Navigating="www.google.com"
to...
Source="http://www.google.com"
Hope that helps!

First of all Navigating="www.google.com" - a correct website name would be: https://www.google.com
Try to start all url with http:// or https://
And to navigate trough websites, try to put this somewhere in MainWindow.xaml.cs after
public MainWindow()
{
InitializeComponent();
WebBrowser_Name.Navigate(new Uri(#"https://google.com"));

How to place an UserControl in foreground?

I need to display a UserControl over the screen, o top of everything.
With the following code UserControl show content under ContentGrid.
How do I place UserControl in foreground?
Main.xaml
<Grid x:Name="LayoutRoot">
<local:AdvertisementsFullScreen>
</local:AdvertisementsFullScreen>

ZIndex
http://msdn.microsoft.com/en-us/library/system.windows.controls.panel.zindex.aspx
<Grid>
<Grid Panel.ZIndex="1">
<Rectangle Fill="Blue" Width="50" Height="50" Panel.ZIndex="1" />
<Rectangle Fill="Red" Width="50" Height="50" Panel.ZIndex="0" />
</Grid>
<Grid Panel.ZIndex="0">
<Rectangle Fill="Green" Width="50" Height="50" Panel.ZIndex="0" />
<Rectangle Fill="Yellow" Width="50" Height="50" Panel.ZIndex="0" />
</Grid>

Using
<UserControl Panel.ZIndex="100" />
On my UserControl, solved my problem.

There are different ways to achieve what you're after. One way would be to set the Panel.ZIndex attached property on it:
<local:AdvertisementsFullScreen Panel.ZIndex="10" />
Another is just to declare it underneath other controls on the XAML page:
<local:AdvertisementsFullScreen />
<local:AdvertisementsFullScreen /> <!-- This one is on top -->
A third, perhaps more suitable method is to use the Adorner Class. The Adorner Layer is a visual layer above the normal layer where UI elements are displayed. While it is not normally used to display whole UserControls, it is possible. Please see the answer to the WPF adorner with controls inside question here on Stack Overflow for further information on this.

WPF Issues with Control Layout

I am making an application that connects to our billing software using its API, and I am running into a few issues getting the layout working properly.
I want to make it so that when one of the expanders is minimized, the other window fills the gap, and when it is expanded again the other expander goes back to where it was. Right now when the arrow is clicked on one, there is just an empty gap. I used a DockPanel as the parent which I assumed would automatically do this, but it isn't working.
Second question, is there a way to make these areas resizable? I don't want to try and get too frisky with allowing the user to undock the menus (don't even know if that is possible with just straight WPF) but it would be nice if they could change the width/height of them.
Also, just a newbie question to C#, but what is the equivalent of a C++ header file? It looks like you just use .cs files, but I am not sure. I want to extract all of my functions that pull the data from the billing software and put them into a different file to clean up the code.
Here is my XAML...
<Window x:Class="WpfApplication3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Billing Management" Height="550" Width="754" xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared" WindowStartupLocation="CenterScreen" WindowStyle="ThreeDBorderWindow">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="22" />
<RowDefinition />
</Grid.RowDefinitions>
<Menu Height="22" Name="menu1" Margin="0" HorizontalAlignment="Stretch" VerticalAlignment="Top" HorizontalContentAlignment="Left" IsEnabled="True" IsMainMenu="True">
<MenuItem Header="_File">
<MenuItem Header="_Open" />
<MenuItem Header="_Close" />
<Separator/>
<MenuItem Header="_Exit" />
</MenuItem>
</Menu>
<TabControl Name="tabControl1" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" BorderThickness="1" Padding="0" TabStripPlacement="Bottom" UseLayoutRounding="False" FlowDirection="LeftToRight" Grid.Row="1">
<TabItem Header="Main" Name="tabItem1" Margin="0">
<DockPanel Name="dockPanel1" LastChildFill="True">
<ListBox Height="100" Name="listBox3" DockPanel.Dock="Top" />
<ListBox Name="listBox4" Width="200" DockPanel.Dock="Right" />
<DockPanel Height="Auto" Name="dockPanel2" Width="Auto" VerticalAlignment="Stretch" LastChildFill="True">
<shared:AnimatedExpander Header="Staff Online" Width="200" Name="expanderStaffOnline" IsExpanded="True" Height="194" BorderThickness="0" DockPanel.Dock="Top" VerticalContentAlignment="Stretch">
<ListBox Name="listboxStaffOnline" Width="Auto" Height="Auto" Margin="0" VerticalAlignment="Stretch" Loaded="listboxStaffOnline_Loaded" />
</shared:AnimatedExpander>
<shared:AnimatedExpander Header="Test Menu 2" Height="Auto" Name="animatedExpander1" BorderThickness="1" Margin="0,0,0,0" IsExpanded="True" VerticalContentAlignment="Stretch">
<ListBox Height="Auto" HorizontalAlignment="Stretch" Name="listBox6" VerticalAlignment="Stretch" Margin="0" BorderThickness="1" />
</shared:AnimatedExpander>
</DockPanel>
<ListBox Height="100" Name="listboxAdminLogs" DockPanel.Dock="Bottom" Loaded="listboxAdminLogs_Loaded" />
<ListBox Name="listBox5" />
</DockPanel>
</TabItem>
<TabItem Header="Support" Name="tabItem2" Margin="0">
</TabItem>
<TabItem Header="Clients" />
<TabItem Header="Billing" />
<TabItem Header="Orders" />
</TabControl>
</Grid>
</Window>

You should place your expanders in a Grid which will allow the content to expand and fill automatically. providing the Row / Column definitions width / height are set to Auto or *.
If you want to resize you will need to use the GridSplitter; see http://www.wpftutorial.net/GridLayout.html for further details.
I don't know C++ so can't really tell you want the equivalent of header files are but I think what you are trying to do is achievable using partial classes; see http://msdn.microsoft.com/en-us/library/wa80x488(v=vs.80).aspx for further details.
And finally, to answer your question in your comments; To get a uniform appearance for all controls in WPF you would need to create custom Styles which use a common set of Colors / Brushes.

I suggest you put the expanders in a Grid and set the row height of the gridrows to auto.
To make it resizable simply add GridSplitters in inbetween rows of this grid.
As for your added question: I think it would be better to copy the style of the expanders' headers and use it for a label or other header.
Also (many questions in this one): C# has no header files.