URI bad format Silverlight Navigation - silverlight

I am making a website with silverlight and I stumbled on this problem;
I created a custom control(Menubutton), which has a Image and a HyperlinkButton
<UserControl
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:ed="http://schemas.microsoft.com/expression/2010/drawing"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:l2="clr-namespace:SilverlightApplication1.Klassen"
mc:Ignorable="d"
x:Class="SilverlightApplication1.MenuButton"
d:DesignWidth="640" d:DesignHeight="480">
<Grid x:Name="LayoutRoot">
<Canvas x:Name="cnvMenuButton" Width="200" Height="50">
<Image Source="/SilverlightApplication1;component/Buttons/MenuButton1.png" Height="50" Width="50" />
<HyperlinkButton x:Name="btnLink" Content="HyperlinkButton" Canvas.Left="55" Canvas.Top="14" FontFamily="Lithos Pro Regular" FontSize="14.667" Foreground="Black" Background="{x:Null}" RenderTransformOrigin="0.5,0.5"/>
</Canvas>
</Grid>
</UserControl>
I want to use several of these in my mainpage, to navigate a navigationFrame to the desired page. So since the HyperlinkButtons work with the NavigateUri and the TargetName, I changed the code behind the MenuButton page so that I can specify the URI and TargetName from my mainpage
public partial class MenuButton: UserControl
{
public MenuButton()
{
// Required to initialize variables
InitializeComponent();
}
public string Titel
{
get { return btnLink.Content.ToString(); }
set { btnLink.Content = value; }
}
public string NaviUri
{
set {
Uri naviuri = new Uri(value);
btnLink.NavigateUri = naviuri;
}
}
public string TargetFrameString
{
get { return btnLink.TargetName; }
set { btnLink.TargetName = value; }
}
}
So after I specify these property's in my mainpage, I get this error :
[net_uri_Badformat] Arguments : Debugging resource strings are unavailable.
code I use in my mainpage:
My Stackpanel with the custom control
<StackPanel x:Name="Menu" Orientation="Vertical" Canvas.Top="243" Height="300" Width="100" HorizontalAlignment="Left" RenderTransformOrigin="0.5,0.5" Margin="70,290,0,126">
<StackPanel.RenderTransform>
<CompositeTransform/>
</StackPanel.RenderTransform>
<l1:MenuButton TargetFrame="contentFrame" NaviUri="Home" Titel="Home"/>
</StackPanel>
the contentframe in the same page
<navigation:Frame x:Name="contentFrame" d:LayoutOverrides="GridBox" RenderTransformOrigin="0.5,0.5">
<navigation:Frame.RenderTransform>
<CompositeTransform/>
</navigation:Frame.RenderTransform>
<navigation:Frame.UriMapper>
<navigationCore:UriMapper>
<navigationCore:UriMapping MappedUri="/Views/Home.xaml" Uri="Home"/>
<navigationCore:UriMapping MappedUri="/Views/About.xaml" Uri="About"/>
</navigationCore:UriMapper>
</navigation:Frame.UriMapper>
</navigation:Frame>
Can anybody help me with this?

You should include the second parameter to the Uri constructor: UriType.Relative

Looks like there's a slight oversight with your NaviUri property: It doesn't have a get method. There's no way to retrieve the value that is set.

NavigationService.Navigate(new Uri("/dllPageTest;component/PageFromDll.xaml",UriKind.RelativeOrAbsolute));
This example works!))

Related

WPF Core 3.1 bound TextBox not visible at runtime

Learning WPF Core 3.1 WPF MVVM pattern, using Visual Studio 2019 4.8.04084.
I have a MainWindow with the following (boilerplate excluded)
<Window>
<Grid
Width="1024"
Height="768"
Margin="0,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<usercontrols:CustomerMaintenanceControl
x:Name="CustomerMaintenance"
Grid.Row="0"
Height="109"
VerticalAlignment="Top" />
</Grid>
</Window>
The CustomerMaintenanceControl user control looks like this:
<UserControl
x:Class="Redacted.UserControls.CustomerMaintenanceControl"
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:usercontrols="clr-namespace:Redacted.UserControls"
xmlns:vm="clr-namespace:Redacted.ViewModels"
d:DesignHeight="450"
d:DesignWidth="800"
Loaded="UserControl_Loaded"
mc:Ignorable="d">
<UserControl.Resources>
<vm:CustomerMaintenanceViewModel x:Key="viewModel" />
</UserControl.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<usercontrols:CustomerMaintenanceGridControl
x:Name="gridControl"
Grid.Row="0"
Height="200"
DataContext="{StaticResource viewModel}" />
<usercontrols:CustomerMaintenanceDetailControl
x:Name="detailControl"
Grid.Row="1"
Width="800"
Height="200"
HorizontalAlignment="Left"
VerticalAlignment="Center"
DataContext="{StaticResource viewModel}" />
</Grid>
</UserControl>
Here's the CustomerMaintenanceDetailControl, where the issue is:
<UserControl
x:Class="Redacted.UserControls.CustomerMaintenanceDetailControl"
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:local="clr-namespace:Redacted"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<Grid Margin="0,0,0,325">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<TabControl
x:Name="tabControl"
Grid.Row="0"
Margin="0,0,0,0">
<TabItem>
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<TextBlock>General</TextBlock>
</StackPanel>
</TabItem.Header>
<StackPanel>
<TextBox
x:Name="companynmTextbox"
Width="322"
Margin="0,32,228,0"
HorizontalAlignment="Left"
IsReadOnly="True"
Text="{Binding Path=Entity.Companynm}" />
</StackPanel>
</TabItem>
</TabControl>
</Grid>
</UserControl>
So the CustomerMaintenanceControl has two user controls in it, a CustomerMaintenanceGridControl that has a DataGrid and then a CustomerMaintenanceDetailControl which has a tab control and a bound TextBox. The grid is pulling data in fine, so the model and data layer are working. However the 'companyNmTextBox' control on CustomerMaintenanceGridControl is displaying nothing.
There are no binding errors in VS. In addition, when I run the application and open the Live Visual Tree, I can open the properties for 'companyNmTextBox' and under Inherited\DataContext I have my 'Customers' ObservableCollection there and populated, and my 'Entity' property on the model populated with the data for the first Customer. Yet nothing showing onscreen.
Since people are voting to close because of 'debugging details' (?) - the debugging details are in the last paragraph - there are no binding or errors in Visual Studio, and everything appears bound OK in the Live Visual Tree/ The 'desired behaviour' is that the textbox displays the value of the thing that it is bound to. If there are further debugging steps I could investigate I'd be delighted to hear them.
Your Entity has to implement INotifyPropertyChanged interface
public class Entity : INotifyPropertyChanged
{
private string companynm;
public string Companynm
{
get
{
return companynm;
}
set
{
this.companynm = value;
NotifyPropertyChanged();
}
}
...
private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
Also TextBox companynmTextbox has the property IsReadOnly set to true, so in that case I would modify the binding.
Text="{Binding Path=Entity.Companynm, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"
It was a typo to the call to RaisePropertyChanged() in the ViewModel the CustomerMaintenanceDetailControl is using.
I had:
private Customer _entity = new Customer();
public Customer Entity
{
get { return _entity; }
set
{
_entity = value;
RaisePropertyChanged("Customer"); // <- problem here
}
}
I should have had:
private Customer _entity = new Customer();
public Customer Entity
{
get { return _entity; }
set
{
_entity = value;
RaisePropertyChanged("Entity"); // <- doh
}
}

How to nest a ModernMenu in a modernUI WPF application?

I'm creating a WPF application using the ModernUI framework and I'm having trouble nesting a ModernMenu control in my MainWindow class. Here's what I had initially for my MainWindow:
<mui:ModernWindow x:Class="MyApp.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:mui="http://firstfloorsoftware.com/ModernUI"
xmlns:local="clr-namespace:MyApp"
mc:Ignorable="d"
Title="MyApp" IsTitleVisible="True" Height="350" Width="525" WindowState="Maximized" ContentSource="/Views/SourcePage1.xaml">
<mui:ModernWindow.MenuLinkGroups >
<mui:LinkGroup x:Name="sourceGroup" DisplayName="Source">
<mui:LinkGroup.Links>
<mui:Link x:Name="sourceLink1" DisplayName="File" Source="/Views/SourcePage1.xaml"/>
<mui:Link x:Name="sourceLink2" DisplayName="Instrumentation" />
</mui:LinkGroup.Links>
</mui:LinkGroup>
</mui:ModernWindow.MenuLinkGroups>
In "SourcePage1.xaml" I try to add a second sub-menu (an instance of ModernMenu):
<UserControl x:Class="MyApp.Views.SourcePage1"
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:mui="http://firstfloorsoftware.com/ModernUI"
xmlns:local="clr-namespace:MyApp.Views"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid x:Name="mainGrid" Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="4"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border x:Name="initialSpacer" Grid.Column="0" Background="Transparent" BorderBrush="DimGray" BorderThickness="2">
<Grid>
<Label Content="Ready" FontSize="40" Foreground="DimGray" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Border>
<GridSplitter Grid.Column="1" Width="4" HorizontalAlignment="Center" VerticalAlignment="Stretch"/>
<mui:ModernMenu Grid.Column="2">
<mui:ModernMenu.LinkGroups>
<mui:LinkGroup DisplayName="Catagory1">
<mui:LinkGroup.Links>
<mui:Link x:Name="catagory1Link" DisplayName="name1" Source="/Views/SettingsPage.xaml"/>
<mui:Link DisplayName="insert" />
</mui:LinkGroup.Links>
</mui:LinkGroup>
<mui:LinkGroup DisplayName="Catagory2">
<mui:LinkGroup.Links>
<mui:Link DisplayName="name1" />
<mui:Link DisplayName="name2" />
<mui:Link DisplayName="name3" />
</mui:LinkGroup.Links>
</mui:LinkGroup>
<mui:LinkGroup DisplayName="Catagory3">
<mui:LinkGroup.Links>
<mui:Link DisplayName="name1" />
</mui:LinkGroup.Links>
</mui:LinkGroup>
</mui:ModernMenu.LinkGroups>
</mui:ModernMenu>
</Grid>
Where "SettingsPage.xaml" is just for testing:
<UserControl x:Class="MyApp.Views.SettingsPage"
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:mui="http://firstfloorsoftware.com/ModernUI"
xmlns:local="clr-namespace:MyApp.Views"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid x:Name="mainGrid" Margin="0,10,0,0">
<Label Content = "Hi there!"/>
</Grid>
The MainWindows' ModernMenu shows up and works well. Likewise, the ModernMenu on "SourcePage1.xaml" also shows up just fine, but I cannot seem to be able to assign it any source content. When I click on any of the links that have been assigned content (like "catagory1Link") nothing appears. What could be the problem here? Am I not allowed to nest menus like this?
The ModernMenu doesn't auto navigate the frame, as you stated. You could use a ModernTab instead but it will setup another ModernFrame and that frame is the one the links set the source on.
ModernMenu does have a SelectedLink DependencyProperty though. If you bind it to a property on your usercontrol, you can detect the link click and navigate the frame yourself.
SourcePage1.xaml
<mui:ModernMenu Grid.Column="1" SelectedLink="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}, Path=MenuSelectedLink, Mode=OneWayToSource}">
SourcePage1.xaml.cs
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows.Controls;
using FirstFloor.ModernUI.Presentation;
namespace WpfApp17
{
public partial class SourcePage1 : UserControl, INotifyPropertyChanged
{
public SourcePage1()
{
InitializeComponent();
}
#region Property Link MenuSelectedLink
private Link _MenuSelectedLink;
public Link MenuSelectedLink { get { return _MenuSelectedLink; } set { SetProperty(ref _MenuSelectedLink, value); OnMenuSelectedLinkChanged(); } }
#endregion
private void OnMenuSelectedLinkChanged()
{
if (MenuSelectedLink == null || MenuSelectedLink.Source == null)
return;
// Navigate the frame to the source.
var frame = FirstFloor.ModernUI.Windows.Navigation.NavigationHelper.FindFrame(null, this);
if (frame != null)
{
if (frame.Source != MenuSelectedLink.Source)
frame.Source = MenuSelectedLink.Source;
}
}
#region INotifyPropertyChanged
public event PropertyChangedEventHandler PropertyChanged;
protected bool SetProperty<T>(ref T field, T value, [CallerMemberName]string name = null)
{
if (Equals(field, value))
{
return false;
}
field = value;
this.OnPropertyChanged(name);
return true;
}
protected void OnPropertyChanged([CallerMemberName]string name = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}
#endregion
}
}
J.H.'s solution is correct and I've marked it as such. I only changed things a little to get the behavior I was looking for: I created a new UserControl consisting simply of a "ModernMenu" object in the first row of the grid and a "ModernFrame" in the second row. The frame is named "pageFrame". Then, I just add the content directly to pageFrame when the menu link changes in this new UserControls' code-behind file:
private void OnMenuSelectedLinkChanged()
{
if (MenuSelectedLink == null || MenuSelectedLink.Source == null)
return;
// Navigate the frame to the source.
pageFrame.Source = MenuSelectedLink.Source;
}

How do I initialize viewmodel's datacontext when the application starts?

I started to use MVVMLight framework recently.
When I use ContentPresenter to swtich between ViewModel, it seems like it initialize the datacontext when it first displays.
However, I want it to initialize it's datacontext so it can keep track of any change from the initial loading of the application, or at least share the data with other viewmodel(I assume maybe I can use dataservice to keep track of all the data, but I could not find a right example to use it with contentpresenter & MVVMLight).
Below is the sample code I made. When I click Review button, "usercontrolview" will display "Picture Saved", however "contentpresenterview" will display "No Picture".
Sample Image
MainView.xaml
<Grid>
<Button x:Name="CaptureButton" Content="Capture" HorizontalAlignment="Left" Margin="34,10,0,0" VerticalAlignment="Top" Width="75"
Command="{Binding CaptureCommand}"/>
<Button x:Name="ReviewButton" Content="Review" HorizontalAlignment="Left" Margin="146,10,0,0" VerticalAlignment="Top" Width="75"
Command="{Binding ShowReviewCommand}"/>
<TextBlock FontSize="36"
FontWeight="Bold"
Foreground="Purple"
Text="{Binding CaptureStatus}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
TextWrapping="Wrap" />
<Grid x:Name="usercontrolview" Visibility="{Binding ReviewModeOn, Converter={StaticResource BooleanToVisibilityConverter}}" Margin="0,50,150,0">
<view:ReviewView/>
</Grid>
<ContentPresenter x:Name="contentpresenterview" Content="{Binding CurrentContent}" Margin="150,50,0,0"/>
</Grid>
MainViewModel.cs (Partial)
public MainViewModel()
{
CaptureStatus = "No Picture";
CaptureCommand = new RelayCommand(Capture);
ShowReviewCommand = new RelayCommand(ShowReview);
ReviewModeOn = false;
}
public RelayCommand CaptureCommand { get; private set; }
private void Capture()
{
CaptureStatus = "Pictures Saved";
Messenger.Default.Send<NotificationMessage>(new NotificationMessage("Pictures Saved"), "Captured");
}
public RelayCommand ShowReviewCommand { get; private set; }
private void ShowReview()
{
ReviewModeOn = !ReviewModeOn;
CurrentContent = ContentViewModel;
}
And my template for ReviewViewModel & ReviewContentPresenterViewModel
public ***ViewModel()
{
Messenger.Default.Register<NotificationMessage>(this, "Captured", Captured);
CaptureStatus = "No Picture";
}
private void Captured(NotificationMessage notificationMessage)
{
CaptureStatus = notificationMessage.Notification;
}
private string _captureStatus;
public string CaptureStatus
{
get { return _captureStatus; }
set { Set(ref _captureStatus, value); }
}
======================= Update =======================
My template for ReviewView & ReviewContentPresenterView.
It takes DataContext by locator.
<UserControl x:Class="***View"
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:ignore="http://www.galasoft.ch/ignore"
mc:Ignorable="d ignore"
DataContext="{Binding ***ViewModel, Source={StaticResource Locator}}">
<Grid Background="Gray">
<TextBlock FontSize="36"
FontWeight="Bold"
Foreground="Purple"
Text="{Binding CaptureStatus}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
TextWrapping="Wrap" />
</Grid>
</UserControl>
It seems your DataContext in the root Grid and all it's children is the MainViewModel and you want other DataContext for ContentPresenter. Create the other ViewModel as a resource e.g.
<Grid>
<Grid.Resources>
<local:TheViewModelIWant x:Key=ContentViewModel/>
</Grid.Resources>
...
...
<ContentPresenter DataContext={StaticResource ContentViewModel} ...
(By the way, if you are already creating an instance of TheViewModelIWant somewhere e.g. in other ViewModels or view code behind then you can stop using that instance and access this instance in C# code as Resources["ContentViewModel"])

Caliburn.Micro example with AvalonDock not working

This is a newbie question about using Avalon Dock and Caliburn.Micro together. First I got a simple example of Caliburn.Micro working, taken from the Mindscape blog's excellent tutorial on Caliburn Micro. This example consists of a main window called MainShellView:
<UserControl x:Class="TestApp.MainShellView"
d:DesignHeight="300" d:DesignWidth="300">
<Grid Width="300" Height="300" Background="LightBlue">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ContentControl Name="ColorModel" Margin="10"/>
<Rectangle Width="100" Height="100" Fill="{Binding Color}" Grid.Column="1"/>
</Grid>
</UserControl>
where ColorView is made of three radio buttons:
<UserControl x:Class="TestApp.ColorView">
<Grid>
<RadioButton Name="Red" Content="Red" Foreground="White"
VerticalAlignment="Center" HorizontalAlignment="Center" />
<RadioButton Name="Green" Content="Green" Foreground="White"
VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="1" />
<RadioButton Name="Blue" Content="Blue" Foreground="White"
VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="2" />
</Grid>
</UserControl>
The class behind MainShellView has a Color property:
public class MainShellViewModel : PropertyChangedBase, IHandle<ColorEvent>
{
public SolidColorBrush Color
{
get { ... }
set { ... }
}
}
and Caliburn.Micro sets the color of the rectangle on the right in MainShellView to the color selected by the radio buttons:
[Export(typeof(ColorViewModel))]
public class ColorViewModel
{
public void Red()
{
_events.PublishOnUIThread(new ColorEvent(new SolidColorBrush(Colors.Red)));
}
public void Green() { /* something similar */ }
public void Blue() { /* something similar */ }
}
I then tried replacing the Grid in the MainShellView by an AvalonDock layout, with the ColorView in one document and the colored rectangle in another document:
<UserControl x:Class="TestApp.MainShellView"
xmlns:local="clr-namespace:TestApp"
d:DesignHeight="300" d:DesignWidth="300">
<avalon:DockingManager>
<avalon:LayoutRoot>
<avalon:LayoutPanel>
<avalon:LayoutDocumentPane>
<avalon:LayoutDocument Title="Document 1">
<ContentControl Name="ColorModel"/>
</avalon:LayoutDocument>
</avalon:LayoutDocumentPane>
<avalon:LayoutDocumentPane>
<avalon:LayoutDocument Title="Document 2">
<Rectangle Width="100" Height="100" Fill="{Binding Color}" Grid.Column="1"/>
</avalon:LayoutDocument>
</avalon:LayoutDocumentPane>
</avalon:LayoutPanel>
</avalon:LayoutRoot>
</avalon:DockingManager>
</UserControl>
However the ColorView doesn't appear on the left hand side. The Caliburn binding also fails - stepping through the Caliburn source code, this is because the VisualTreeHelper can't see the ColorView.
I've abbreviated the source code above, and put the full source in https://github.com/BobMortimer/SO_Question1 .
I'm certainly doing something stupid. So why is this not working, and how can I fix it?
I think you are missing 2 overrides in bootstrapper for
protected override IEnumerable<object> GetAllInstances(Type serviceType)
{
return container.GetExportedValues<object>(
AttributedModelServices.GetContractName(serviceType));
}
and
protected override void BuildUp(object instance)
{
container.SatisfyImportsOnce(instance);
}
surprisingly enough it ran but didn't do what it was suppose to based on the source you provided in github. As you said on the debugger it dies, was it IoC not Initialized?

Wpf contentControl

New programmer question:
I'm trying to create a simple navigation welcome page similiar to wht you whould see on an ipad.
My MainWindow has a titlebar (which wont change) and the rest will be a container of sorts that will show differnt things based on events.
So here is my question how do I bind the container (contentcontrol) to show other views ie show welcomeview originally and then if a user click on a button from the welcome view the content control shows the view they selected.
I currently has the Welcome Page as:
<UserControl x:Class="ContentControl.Views.WelcomeView"
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:vm="clr-namespace:ContentControl.ViewModels"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.DataContext>
<vm:WelcomeViewModel />
</UserControl.DataContext>
<Grid Background="red">
<Grid.RowDefinitions >
<RowDefinition Height="25*" />
<RowDefinition Height="50*"/>
<RowDefinition Height="25*"/>
</Grid.RowDefinitions>
<Rectangle Grid.Row="0" Fill="Green"/>
<DockPanel Grid.Row="1" HorizontalAlignment="Center" Background="White">
<Button Height="50" Width="50" Margin="5" Content="DASH" Command="{Binding ViewChangedCommand}" CommandParameter="Dashboard"/>
<Button Height="50" Width="50" Margin="5" Content="ROOM" Command="{Binding ViewChangedCommand}" CommandParameter="MeetingRoom"/>
<Button Height="50" Width="50" Margin="5" Content="SCREEN" Command="{Binding ViewChangedCommand}" CommandParameter="Screen" />
</DockPanel>
<Rectangle Grid.Row="2" Fill="Blue"/>
</Grid>
</UserControl>
The viewModel is as follows:
class WelcomeViewModel : BaseViewModel
{
private MainWindowViewModel _mainWindowVm;
private RelayCommand<string> _viewChangedCommand;
public ICommand ViewChangedCommand
{
get { return _viewChangedCommand ?? (_viewChangedCommand = new RelayCommand<string>(OnViewChanged)); }
}
public event EventHandler ViewChanged;
private void OnViewChanged(string view)
{
EventHandler handler = ViewChanged;
if (handler != null) handler(view, EventArgs.Empty);
}
public MainWindowViewModel MainWindowVm
{
get { return _mainWindowVm; }
set
{
_mainWindowVm = value;
OnPropertyChanged("MainViewModel");
}
}
public WelcomeViewModel()
{
MainWindowVm = new MainWindowViewModel();
ViewChanged += MainWindowVm.ViewChanged;
}
}
}
And I have my Mainwindow as follows:
<Window x:Class="ContentControl.Views.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="clr-namespace:ContentControl.ViewModels"
xmlns:views="clr-namespace:ContentControl.Views"
Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
<vm:MainWindowViewModel />
</Window.DataContext>
<Window.Resources>
<DataTemplate DataType="{x:Type vm:ScreenViewModel}">
<views:ScreenView />
</DataTemplate>
<DataTemplate DataType="{x:Type vm:WelcomeViewModel}">
<views:WelcomeView />
</DataTemplate>
<DataTemplate DataType="{x:Type vm:MeetingRoomViewModel}">
<views:MeetingRoomView />
</DataTemplate>
<DataTemplate DataType="{x:Type vm:DashboardViewModel}">
<views:DashboardView />
</DataTemplate>
</Window.Resources>
<Grid>
<StackPanel>
<Label>This Is My Label</Label>
<ContentControl x:Name="MainPanel" Content="{Binding Content, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
MinHeight="200"
MinWidth="200"
HorizontalContentAlignment="Left"
VerticalContentAlignment="Center"
Focusable="False">
</ContentControl>
</StackPanel>
</Grid>
</Window>
Main Window View Model:
class MainWindowViewModel : BaseViewModel
{
private UserControl _content;
public UserControl Content
{
get { return _content; }
set
{
_content = value;
OnPropertyChanged("Content");
}
}
public void ViewChanged(object o, EventArgs e)
{
switch (o.ToString())
{
case "Welcome":
{
var welcome = new WelcomeView();
Content = welcome;
break;
}
case "MeetingRoom":
{
var meetingRoom = new MeetingRoomView();
Content= meetingRoom;
break;
}
case "Dashboard":
{
var dashboard = new DashboardView();
Content = dashboard;
break;
}
case "Screen":
{
var screen = new ScreenView();
Content = screen;
break;
}
}
MessageBox.Show(o.ToString());
}
public MainWindowViewModel()
{
}
}
}
How do I hook these Up to work with each other So I can show the WelcomeView as the content of the contentcontrol and then when I press a button have the ContentControl change to what was selected.
Again sorry I am new to MVVM and WPF and these binding are messing with my head.
The Buttons DASH, ROOM, SCREEN, should be on the MainWindow. The ViewChangedCommand should be on the MainWindowViewModel. And the content will be showed by dynamic templating.
If you want the buttons on the controls:
Ok so, then let's put the buttons on the controls, but the change content command should be in the MainWindowViewModel. To make a binding like this you should do something like this:
Command="{Binding Path=DataContext.ChangeContentCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
in your buttons

Resources