Develop Reference

mainPage.xaml does not load into mainWindowMain frame in MainWindow.xaml

I have two xaml:
MainWindow.xaml.
After running program i have only window with text:"mainPage.xaml". There is no menu or jpg that i had setup in mainPage.xaml
MainWindow.xaml code:
<Window x:Class="FK.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"
mc:Ignorable="d"
Title="A and I Version 0.1" Height="1080" Width="1920">
<Grid Background="LightGray">
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<Frame x:Name="mainWindowMain"
Grid.Row="0">
</Frame>
</Grid>
MainWindow.xaml.cs code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace FK
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
mainWindowMain.Content = new Uri("mainPage.xaml", UriKind.Relative);
}
}
}
mainPage.xaml code:
<Window x:Class="FK.mainPage"
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:FK"
mc:Ignorable="d"
Title="mainPage" Height="450" Width="800">
<Grid Background="LightGray">
<Grid.RowDefinitions>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Menu
x:Name="mainWindowMainMenu"
Grid.Row="0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Height="20"
Width="auto"
>
<MenuItem Header="Menu" Height="20" Width="50">
<MenuItem x:Name="menuOpcjaFinances"
Header="Finances"
InputGestureText="Ctrl+F"
Height="20"
Width="200"
>
</MenuItem>
<MenuItem x:Name="menuOpcjaInvoices"
Header="Invoces"
InputGestureText="Ctrl+I"
Height="20"
Width="200">
</MenuItem>
<MenuItem x:Name="menuOpcjaPomoc"
InputGestureText="Ctrl+H"
Header="Help"
Height="20"
Width="200"
>
</MenuItem>
<MenuItem x:Name="menuOpcjaWyjscie"
InputGestureText="Ctrl+Q"
Header="Exit"
Height="20"
Width="200"
></MenuItem>
</MenuItem>
</Menu>
<Image Grid.Row="1"
Source="/mainPicture_.jpg"
VerticalAlignment="Stretch"
HorizontalAlignment="Center"></Image>
</Grid>
</Window>
When I had in MainWindow two gridrows, in first gridrow i had menu from mainPage.xaml, and in second grid i had frame, after clicking one of menu, other xaml loads without any problems into the frame.
I tried to setup two gridrows in MainWindow,
i have tried to make public void with mainWindowMain.Content = new Uri("mainPage.xaml", UriKind.Relative); and insert the void in public MainWindow, but it does not help.
I have no errors while compiling the program, i do not know where to search the problem

First of all, your design is weird. You should have only one menu, in your MainWindow.xaml. Secondly - again - drop off frame control and use ContentControl instead. Frame control is heavy and It's not useful unless you want navigation and all It's features, like navigation history. Drop off Pages too, what you need is to go into the world of UserControls.
For your other "pages" - having each one It's own menu - you think this is nice design? Having top menu and then underlying view have another menu, really ?...I think your views (Pages in your case) should have TabControl, that would look and feel more normal to user. So your app would have top menu to navigate between views, and your views would have Tabs like "Invoices","Tax". That is only my opinion though.
However, you'll need to learn a lot more what WPF provides to you. I suggest you dig into MVVM pattern, WPF bindings, dependency injections, DataTemplates, Command bindings etc. Learning curve is steep, but you'll be glad once you'll figure It out.
Useful links for your answer:
navigation using ContentControl - MVVM article
SO question - check accepted answer
But, If you are a beginner, you can do It without MVVM pattern. Like you did, in code behind.
AND FINAL: If you still persist on your design, then instead of this line:
mainWindowMain.Content = new Uri("mainPage.xaml", UriKind.Relative);
create a click event of your MenuItem (in MainWindow) in code behind:
private void Menu_item_Click(object sender, RoutedEventArgs e)
{
mainWindowMain.Navigate(new mainPage());
}

Two major issues:
You are using the Frame wrong.
Window must always be the root element i.e. cannot be a child element.
1.) The value of Frame.Content will be directly rendered on the screen. That's why you only see the Uri.ToString() value "mainPage.xaml".
You must use the Frame.Source property instead. The Frame then loads the content that the URI points to by assigning it to the Content property: you don't want to display the string, but the content of the resource that the string references.
public MainWindow()
{
InitializeComponent();
mainWindowMain.Source = new Uri("mainPage.xaml", UriKind.Relative);
}
The recommended pattern is known as View Model First. See this short example: C# WPF Page Navigation.
2.) A Windowmust be the root element and can not be nested into another control i.e. it can't be a child.
To successfully display FK.mainPage as content of the Frame, you must turn it into a UserControl or some other container like Page:
mainPage.xaml
<Page x:Class="FK.mainPage">
...
</Page>

WPF C# user control with 2 or more buttons

Sorry if this has been asked before and I have spent about a week trying to find a similar question to point me in the right direction. I am teaching myself C# with WPF, XAML etc and am playing around with user controls. I made a simple app with a user control to load on top of other windows or user controls. The UC in question has two buttons and I need to get to the click events for each button in main window once the control is loaded. The main window has a button that loads the control.
Through some research I was able to find a solution from user SWilko (https://stackoverflow.com/a/28949666/10659981) but I can't figure it out for each button separately (click button a and show "clicked btn a", click button b and show "clicked button b"). I did try calling by sender using name and that will not work either. I feel like I am close with the help from the answer by SWilko but stuck.
Here is the code so far:
Basic main screen loading user control
<Window x:Class="UCBTN_TEST.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:UCBTN_TEST"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="435">
<Grid>
<Button Content="Load Button" HorizontalAlignment="Left" Margin="18,23,0,0" VerticalAlignment="Top" Width="74" Click="Button_Click"/>
<Grid x:Name="GridLoad" HorizontalAlignment="Left" Height="300" Margin="120,23,0,0" VerticalAlignment="Top" Width="300" Background="#FFF1CBCB"/>
</Grid>
</Window>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace UCBTN_TEST
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
GridLoad.Children.Clear();
GridLoad.Children.Add(new WindowControl());
}
}
}
The button user control
<UserControl x:Name="UCMain" x:Class="UCBTN_TEST.Controls.ButtonControl"
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:UCBTN_TEST.Controls"
mc:Ignorable="d" d:DesignWidth="300" Height="40.333">
<Grid Background="#FFE7EEA7">
<Button x:Name="ButtonA" Content="Button A" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="75" Click="ButtonA_Click" Background="Red"/>
<Button x:Name="ButtonB" Content="Button B" HorizontalAlignment="Left" Margin="215,10,0,0" VerticalAlignment="Top" Width="75" Click="ButtonA_Click" Background="Green"/>
</Grid>
</UserControl>
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace UCBTN_TEST.Controls
{
/// <summary>
/// Interaction logic for ButtonControl.xaml
/// </summary>
public partial class ButtonControl : UserControl
{
public ButtonControl()
{
InitializeComponent();
}
private void ButtonA_Click(object sender, RoutedEventArgs e)
{
RaiseEvent(new RoutedEventArgs(ClickEvent1, this));
}
public static readonly RoutedEvent ClickEvent1 = EventManager.RegisterRoutedEvent("Click", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(ButtonControl));
public event RoutedEventHandler Click
{
add { AddHandler(ClickEvent1, value); }
remove { RemoveHandler(ClickEvent1, value); }
}
}
}
A second user control which would ultimately have some other controls once the buttons work correctly. But the button UC will load on top, simple button features related to WindowControl.
<UserControl
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:UCBTN_TEST"
xmlns:Controls="clr-namespace:UCBTN_TEST.Controls" x:Class="UCBTN_TEST.WindowControl"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid Background="#FFE7CFEE">
<Controls:ButtonControl HorizontalAlignment="Left" Height="37" VerticalAlignment="Top" Width="300" Click="Click1"/>
</Grid>
</UserControl>
I understand the behind code and why this is happening. My problem is that I need to have the buttons be unique in their events. I have tried calling by sender and name and that just kills the event all together.
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using UCBTN_TEST.Controls;
namespace UCBTN_TEST
{
/// <summary>
/// Interaction logic for WindowControl.xaml
/// </summary>
public partial class WindowControl : UserControl
{
public WindowControl()
{
InitializeComponent();
}
private void Click1(object sender, RoutedEventArgs e)
{
MessageBox.Show("This triggers both");
}
}
}

I was going to add a bunch of comments but really this is kind of answering the question and there's a lot to explain.
You should look into MVVM and mostly be thinking in terms of binding commands rather than which button was clicked. There are exceptions to this. For example, if you were building an on screen keyboard. The reason this is different because it's purpose can be encapsulated. The user presses a button which has "A" in it. Whatever textbox is focussed should be sent the character "A". They press a button showing "B" and similarly "B" should be sent. That functionality can be encapsulated in the control.
As it is, you have two buttons.
You put them in a usercontrol and encapsulate them.
By doing this you created a boundary.
This then creates a complication - which was clicked?
The usercontrol is also not particularly re-use friendly. If you add two then there are two buttonA and two button B. You could potentially improve that with a custom event args on your custom routed event and a dependency property on your usercontrol. Pass some usercontrol identifier along with which button was pressed.
This would be an unusual way to work though. I've rarely seen Custom routed events used in commercial apps.
All in all I would suggest the usercontrol mainly adds complexity.
Say you wanted to have 20 sets of 2 buttons.
Or 20 sets of 5 radiobuttons for a set of multiple choice questions.
The way to do that sort of thing is to use an itemscontrol and template out the multiple controls. One template giving 2 buttons ( or a textblock question and 5 radiobuttons for answers ) per row.
A click event is already a routed event and would bubble to the window. You may as well remove your custom routed event and the handler out the usercontrol... and the usercontrol. Just handle click in the window.
Code:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
var btn = e.OriginalSource as Button;
if(btn == null)
{
return;
}
MessageBox.Show($"Button clicked was {btn.Tag}");
}
Markup:
ButtonBase.Click="Button_Click"
Title="MainWindow"
>
<Grid>
<StackPanel>
<Button x:Name="ButtonA" Content="Button A" Tag="A" Background="Red"/>
<Button x:Name="ButtonB" Content="Button B" Tag="B" Background="Green"/>
</StackPanel>
</Grid>
</Window>

How can the opacity of a program be controled through a settings window in real time?

I am trying to change the Opacity of the main application window through a settings window popup in real time. What is the proper way of doing this?
So far, I have tried using a Slider to output the value to the settings file. When the settings popup is closed, the main window refreshes its opacity property based on the settings file. This method works but I'd like the ability to change the opacity and view the result in real time.
The second method I tried was using a Style and applying it to the MainWindow. Then on slider move, the style would be overridden with the value from the slider. This works in real time. But for whatever reason, the settings popup window opacity is also affected even though no style is applied to it.
Here is a sample project named OpacityTest with a main window, a button to open settings popup and slider to control the program's opacity.
App.xaml:
<Application x:Class="OpacityTest.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml">
<Application.Resources>
<Style TargetType="Window" x:Key="wrapper">
<Setter Property="OverridesDefaultStyle" Value="false"/>
<Setter x:Name="opacitySetter" Property="Opacity" Value="1"/>
</Style>
</Application.Resources>
</Application>
MainWindow.xaml:
<Window x:Class="OpacityTest.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" Style="{DynamicResource wrapper}" Background="#FFCDCDCD" AllowsTransparency="True" WindowStyle="None">
<Grid>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<Button Content="Settings" HorizontalAlignment="Center" VerticalAlignment="Center" Width="75" Click="Button_Click"/>
</StackPanel>
</Grid>
</Window>
New window labeled Settings, Settings.xaml:
<Window x:Class="OpacityTest.Settings"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Settings" Height="300" Width="300">
<Grid>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<Slider x:Name="ChangeTransparency" MinWidth="138" MinHeight="22" VerticalAlignment="Center" Padding="0" Orientation="Horizontal" HorizontalAlignment="Center" Value="1" Minimum=".05" Maximum="1" LargeChange=".01" SmallChange=".01" TickFrequency="100" IsSnapToTickEnabled="False" MouseMove="ChangeTransparency_MouseMove"/>
</StackPanel>
</Grid>
</Window>
MainWindow.xaml.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace OpacityTest
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
Settings settings = new Settings();
settings.ShowDialog();
}
}
}
Settings.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
namespace OpacityTest
{
/// <summary>
/// Interaction logic for Settings.xaml
/// </summary>
public partial class Settings : Window
{
public Settings()
{
InitializeComponent();
}
private void ChangeTransparency_MouseMove(object sender, MouseEventArgs e)
{
Style style = new Style { TargetType = typeof(Window) };
style.Setters.Add(new Setter(OpacityProperty, Opacity = ChangeTransparency.Value));
Application.Current.Resources["wrapper"] = style;
}
}
}

It looks like your Style is behaving as if it were declared in a XAML file in a way that affects all Windows, not just the wrapper style, e.g.
<Style TargetType="Window"> ... </Style>
Instead of:
<Style TargetType="Window" x:Key="wrapper"> ... </Style>
I'm not immediately sure of how to declare it the way you're trying to, but a much easier way to accomplish what you're trying to do is to put this in MainWindow.xaml.cs:
private void Button_Click(object sender, RoutedEventArgs e)
{
Settings settings = new Settings();
this.SetBinding(OpacityProperty,
new Binding("Value") { Source = settings.ChangeTransparency });
settings.ShowDialog();
}
No handler on ChangeTransparency is required this way. The only reason I might consider modifying the Style instead is if you can have multiple MainWindows at once, and want one Settings window (opened from any of them) to control them all at once.
As an aside, if you do find that you need to attach to ChangeTransparency, you should attach a handler to its ValueChanged event instead of MouseMove (while MouseMove will generally work out, it's really not the same; e.g. for keyboard input, only ValueChanged will fire).
If Settings can be used from other windows and/or has more properties, you might wish to change Settings to take a Window (or other type) in its constructor, and set up the binding(s) there instead, to keep your code/logic centralized and clean.

What is the most appropriate wpf control for showing a set of words as a text?

I want to show a large set of words , as a text (not as a grid or list) that each word has a set of additional properties like word_id and word_type.
so what is the most appropriate WPF control for this?
Appropriate means having a suitable performance, binding capabilities and all things to deal with word and text.
ListView
FlowDocument
DocumentView
WebBrowser + javascript
TextBlock + Run
or something else?

I'd use WrapPanel / a custom VirtualizingWrapPanel for displaying the items and Converters / Triggers / VisualStateManager for managing the look - subject to your functional reqs.
Here's my take on it:
Code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.ComponentModel;
namespace GridA
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.Loaded += (o, e) =>
{
this.i.ItemsSource = "I am a penel which displays words as seperate items. Feel free to resize myself.".Split(" ".ToCharArray());
};
}
}
}
Markup:
<Window x:Class="GridA.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">
<Grid TextBlock.FontSize="20">
<ItemsControl x:Name="i">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Label Margin="3" BorderBrush="Gray" BorderThickness="2" Content="{Binding}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</Window>

How do I fix the 'Specified class name 'WpfSample.MainWindow' doesn't match actual root instance type 'System.Windows.Window' error?

So I am trying to use a custom wpf control on a winforms using:
var f = new FileStream (#"C:\sample.xaml", FileMode.Open, FileAccess.Read);
var element = XamlReader.Load(f);
f.Close();
var elementHost = new ElementHost();
elementHost.Dock = System.Windows.Forms.DockStyle.Fill;
elementHost.Child = element;
this.Controls.Add(elementHost);
I am not experienced in WPF so I don't know how to fix this error.
EDIT:
So this is the xaml file:
<Window x:Class="WpfSample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:r="http://schemas.aspitalia.com/Ricciolo/Controls"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.Resources>
<XmlDataProvider x:Key="data" Source="Data.xml">
</XmlDataProvider>
<HierarchicalDataTemplate x:Key="dt" ItemsSource="{Binding XPath=outline}">
</HierarchicalDataTemplate>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<r:TreeListView ItemsSource="{Binding Source={StaticResource data},XPath=/opml/body/outline/outline}" ItemTemplate="{StaticResource dt}">
<r:TreeListView.Columns>
<GridViewColumn Header="Title" DisplayMemberBinding="{Binding XPath=#title}" Width="150" />
<GridViewColumn Header="Childs" DisplayMemberBinding="{Binding XPath=#count}" Width="100" />
<GridViewColumn Header="Url" DisplayMemberBinding="{Binding XPath=#xmlUrl}" Width="200" />
</r:TreeListView.Columns>
</r:TreeListView>
</Grid>
</Window>
I also got this from a free custom treelistview control on the net, and included both the compiled control and the data.xml in the solution, this xaml uses.
EDIT2:
Code behind for MainWindow.xaml:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace WpfSample
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow ( )
{
InitializeComponent ( );
}
}
}

OK. I think the problem is coming from the fact that you are loading from a file, but the Window class that backs it (i.e. the code behind object) isn't being brought in with it.
You should either define the WPF control (not sure if a WPF Window should be used - maybe try UserControl instread?) in the same assembly as the WinForms app, or simply add a reference to the assembly that contains the WPF UserControl, and hook it up that way.
Either way, you should just be able to say
elementHost.Child = new WpfSample.MainWindow();
this.Controls.Add(elementHost);
Hope this gets you close.