C# XAML- adding navigation buttons to a browser toolbar - c#

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.
...

Related

WPF Button Define Shape and Text within Content Tag

I'm reading through a WPF book, running through the examples.
Now, I'm working on some buttons.
Within the <Button.Content> </Button.Content> tag, I am able to define the text for the button, or I am able to define a shape that appears on the button face, but I don't appear to be able to do both within the same button.
Here's an example of the button with the ellipse shape on its face:
<Button Background="Blue">
<Button.Content>
<Ellipse Height="40" Width="40" Fill="Green" />
</Button.Content>
</Button>
Here's an example of the button with the text defined:
<Button Background="Red">
<Button.Content>
OK
</Button.Content>
</Button>
Here are the results of these two button definitions (within a WrapPanel):
When I attempt to create a button that defines both properties, using this code:
<Button Background="Orange">
<Button.Content>
OK
<Ellipse Height="40" Width="40" Fill="Wheat" />
</Button.Content>
</Button>
I receive an error that explains: The property 'Content' is set more than once.
So My question is: is it possible to combine these two button content definitions? The goal is to define a button that displays an ellipse shape and text.
You can only set the Content to one element, but you could do this by placing your elements inside of one container, e.g.:
<Button Background="Orange">
<Button.Content>
<Grid>
<Ellipse Height="40" Width="40" Fill="Wheat" />
<TextBlock Text="OK" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
</Button.Content>
</Button>
You are in fact setting the content twice, as you are trying to place two controls.
Try using a Stackpanel to hold both your controls. Also put the "OK" in a Label or Textbox
Example:
<Button Background="Orange">
<Button.Content>
<StackPanel Orientation="Horizontal">
<Label Content="OK" Background="Red"/>
<Ellipse Height="40" Width="40" Fill="Wheat" />
</StackPanel>
</Button.Content>
</Button>

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"));

Source information is missing from the debug information

What i want to do is to add event handlers to the controls inside canvasBackground so i could move all its child elements to different window location using mouse dragging.
But when it starts looping through each Controls in foreach loop, it throws an exception:
XamlParseException occurred The invocation of the constructor on type "AgentWindow.xaml"
that matches the specified binding constraints threw an exception. Line number '3' and line position '9'.
Source information is missing from the debug information for this module
AgentWindow.xaml.cs:
public AgentWindow()
{
InitializeComponent();
foreach (Control control in canvasBackground.Children)
{
control.PreviewMouseLeftButtonDown += this.MouseLeftButtonDown;
control.PreviewMouseMove += this.MouseMove;
control.PreviewMouseLeftButtonUp += this.PreviewMouseLeftButtonUp;
}
}
AgentWindow.xaml:
<Canvas x:Name="canvasBackground">
<Canvas Background="Black" Canvas.Right="10" Canvas.Top="10" Height="200" Width="153">
<Button x:Name="btnF1" Content="f1" Height="56" Width="60" Margin="10,12,79,132" Background="#DDD"></Button>
<Button x:Name="btnF2" Content="f2" Height="56" Width="60" Margin="80,12,9,132" Background="#DDD"/>
<Button x:Name="btnF3" Content="f3" Height="56" Width="60" Margin="10,73,79,71" Background="#DDD"></Button>
<Button x:Name="btnF4" Content="f4" Height="56" Width="60" Margin="80,73,9,71" Background="#DDD"></Button>
<Button x:Name="btnF5" Content="f5" Height="56" Width="60" Margin="10,134,79,10" Background="#DDD"></Button>
<Button x:Name="btnF6" Content="f6" Height="56" Width="60" Margin="80,134,9,10" Background="#DDD"></Button>
</Canvas>
<Button x:Name="btnSomeButton" Content="someb" Height="56" Width="60"
Background="#FFFBFBFB" Canvas.Left="292" Canvas.Top="193"/>
</Canvas>
All this started when i changed GroupBox to Canvas. I did that because i couldn't figure out how to access those buttons inside GroupBox... I'm new to wpf so please be gentle. :)
Canvas is not a Control. Also Children is UIElementCollection so you should loop over UIElement and not Control.
foreach (UIElement control in canvasBackground.Children)
{
....
}
On a side note this loop will hook mouse events on child Canvas and button, not on inner buttons. If you want to do for inner buttons, you have to loop over child of inner canvas as well.
Anyhow, you can use XAML only to hook events. Hook on parent element itself.
<Canvas x:Name="canvasBackground"
PreviewMouseLeftButtonDown="MouseLeftButtonDown"
PreviewMouseMove="MouseMove"
PreviewMouseLeftButtonUp="PreviewMouseLeftButtonUp">
<Canvas>
<Button x:Name="btnF1"/>
<Button x:Name="btnF2"/>
<Button x:Name="btnF3"/>
<Button x:Name="btnF4"/>
<Button x:Name="btnF5"/>
<Button x:Name="btnF6"/>
</Canvas>
<Button x:Name="btnSomeButton" Content="someb" Height="56" Width="60"
Background="#FFFBFBFB" Canvas.Left="292" Canvas.Top="193"/>
</Canvas>

WPF button click and command doesn't work together MVVM

I'm developing some wpf application, using mvvm. I'm trying to use button click event and command together but command never get executed. Also when I use only command without click event it works perfect. Here is the code:
<ControlTemplate x:Key="reminderDataTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="150" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Label Grid.Row="0" Content="New reminder:" HorizontalAlignment="Left" />
<TextBox Text="{Binding Path=ReminderText, UpdateSourceTrigger=PropertyChanged}" Grid.Row="1" Height="150" Width="200" HorizontalAlignment="Left"/>
<Button Name="btnSaveReminder" Grid.Row="2" Content="Save" Width="auto" Height="20" HorizontalAlignment="Left" Click="btnSaveReminder_Click" Command="{Binding Path= btnSaveReminder}" />
</Grid>
</ControlTemplate>
Why is this happening?
Just to mention that I must use click and command together becouse my view and viewmodel are in different projects.
UPDATE:
Also to say that, when I use click and command together in buttons outside of control template, everything works perfect.
on the Click event, execute command.
private void btnClick(object sender, RoutedEventArgs e)
{
var btn = sender as Button;
btn.Command.Execute(btn.CommandParameter);
}

ContextMenu in WPF is too wide

I've got a problem with my ContextMenu in WPF. The menu is far too wide- it's the width of the items I put on it, plus about fifty-a hundred pixels. So when you open the menu, instead of being a clean list of options or buttons, there's loads of greyspace on each side. How can I fix this?
Edit: Here's my XAML for the menu:
<ContextMenu Padding="0">
<Button Content="Close Tab" Height="23" Name="closetabbutton" Width="75" Margin="0,0,0,0" Click="closetabbutton_Click" />
<TextBox Height="23" Name="renamebox" Width="75" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ClipToBounds="True" TextChanged="renamebox_TextChanged" />
<Button Content="Close Menu" Height="23" Name="closemenubutton" Width="75" Margin="0,0,0,0" Click="closemenubutton_Click" />
</ContextMenu>
The space is reserved for icons on the left, and input gesture text (e.g. Ctrl+C) on the right. This is by design.
If you wish to change this, you'll have to create your own ContextMenu style. Here's an example of how to do this:
http://www.dev102.com/2008/06/20/how-to-create-a-wpf-custom-context-menu/
Update
Further to my question comment, MenuItems would normally be used where you have used buttons. For example:
<Grid.ContextMenu>
<ContextMenu>
<MenuItem Name="mnuClose" Header="Close tab" InputGestureText="Ctrl+C" />
<MenuItem Name="mnuRename">
<MenuItem.Header>
<TextBox Name="txtRename" Width="100" />
</MenuItem.Header>
</MenuItem>
</ContextMenu>
</Grid.ContextMenu>

Categories

Resources