Develop Reference

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.

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.

C# XAML- adding navigation buttons to a browser toolbar

I have added a web browser to my C# application using the following XAML code:
<WebBrowser Name="rivBrowser" Height="550" Width="620" Margin="0, 40, 0, 0" Visibility="Visible" />
<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>
</DockPanel>
However, I'm getting some exceptions with the 'Forward' and 'Back' navigation buttons that I'm trying to add to the toolbar. The exceptions say:
Exception thrown
'System.Windows.Markup.XamlParseException' in PresentationFramework.dll
and
Additional information: 'Provide value on 'System.Windows.Baml2006.TypeConverterMarkupExtension' threw an exception.' Line number '73' and line position '22'.
That line is the line <Button Command="Back" ToolTip="Return to the previous page"/>
It's the button I want to use to allow the user to navigate back to the previous page displayed in the browser- but I'm not sure that I'm doing this correctly... Should I be calling a method from my C# code here? How do I do that?
I've not used C# in about 6 years, so am not very familiar with it or how it works...

Since you don't say if you are using the MVVM pattern or not I'll assume you don't.
In this case, you'll want to subscribe to the Click event of the Button rather than using a Command
For example :
<Button Click="GoForward_OnClick" ToolTip="Proceed to the next page" />
And on your code-behind (yourfile.xaml.cs) you'll have the method called when the button is clicked :
private void GoForward_OnClick(object sender, RoutedEventArgs e)
{
// Your code logic goes here
}

Your Command should be pointing to a DelegateCommand object on your viewmodel. Here is a sample:
View:
<Button Command="{Binding SaveCommand}" />
ViewModel:
public DelegateCommand SaveCommand { get; private set; }
public SampleViewModel()
{
SaveCommand = new DelegateCommand(Save);
}
private void Save()
{
// do something
}

If you want to use built in ApplicationCommands the you should use such syntax of Command like ApplicationCommands.Cut.
For example:
<Button Content="Cut" Command="ApplicationCommands.Cut"/>
<Button Content="Copy" Command="ApplicationCommands.Copy"/>
<Button Content="Paste" Command="ApplicationCommands.Paste"/>
MSDN has a good article about a list of available Application Commands:
CancelPrint - Gets the value that represents the Cancel Print command.
System_CAPS_pubpropertySystem_CAPS_static
Close - Gets the value that represents the Close command.
ContextMenu - Gets the value
that represents the Context Menu command.
...

how to place this wpf dockpanel properly

I'm trying to make a WPF DockPanel which looks like the following picture
However I'm a beginner to WPF and I cannot get it correctly. Here is what I'm trying to do.
<WebBrowser DockPanel.Dock="top" Loaded="abc" Name="webBrowser0" />
<WebBrowser DockPanel.Dock="left" Loaded="abc" width="200" Name="webBrowser2" />
<WebBrowser DockPanel.Dock="Right" Loaded="abc" Name="webBrowser2" />
<WebBrowser DockPanel.Dock="Bottom" Loaded="abc" Name="webBrowser3" />

Enabling ContextMenu on a Topmost Window

I have a window with Topmost="True".
<Window ... bunch of code ....
Topmost="True" >
Doing this now effectively disables all context menus on the form. The menus are defined in the XAML, like this:
<StackPanel Width="120" Height="50" MouseMove="Drag_MouseMove">
<Image Source="{Binding" />
<TextBlock Text={Binding}" />
<StackPanel.ContextMenu>
<ContextMenu Name="myMenu" StaysOpen="True">
... bunch of code ...
</ContextMenu>
</StackPanel.ContextMenu>
</StackPanel>
Is there a way to re-enable context menus? I'm also willing to consider alternatives to Topmost="True".

I can't reproduce your problem. I've created a new project using this near-code to yours and context menu does show.
Maybe the problem comes from something else? like the bindings? (talking from experience)
<Window x:Class="WpfApplication8.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" Topmost="True">
<Grid>
<StackPanel Width="120" Height="50" Background="Gray">
<TextBlock Text="yo" />
<TextBlock Text="yo" />
<TextBlock Text="yo" />
<TextBlock Text="yo" />
<TextBlock Text="yo" />
<TextBlock Text="yo" />
<TextBlock Text="yo" />
<TextBlock Text="yo" />
<StackPanel.ContextMenu>
<ContextMenu Name="myMenu" StaysOpen="True">
<MenuItem Header="hello" />
</ContextMenu>
</StackPanel.ContextMenu>
</StackPanel>
</Grid>
</Window>

I suspect that the menu is showing just fine. However, the menu is not a top level item so it ends up behind your topmost MainWindow. I've got the same problem and have not yet found the answer as to how to make sure that the menu always shows.