We Keep Coding

Where are the non-named XAML items declared?

Following shows part of my MainWindow.xaml:
<Grid>
<ListBox x:Name="listBox" (Line #40)
ItemsSource="{Binding Rectangles}"
SelectionMode="Extended" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style
TargetType="{x:Type ListBoxItem}" >
<Setter
Property="Canvas.Left"
Value="{Binding X}" />
<Setter
Property="Canvas.Top"
Value="{Binding Y}" />
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
<Canvas x:Name="dragSelectionCanvas" (Line #64)
Visibility="Collapsed" >
<Border x:Name="dragSelectionBorder" (Line #66)
Opacity="0.5" />
</Canvas>
</Grid>
And this is the corresponding MainWindow.g.i.cs file generated by Visual Studio:
public partial class MainWindow : System.Windows.Window, System.Windows.Markup.IComponentConnector {
#line 40 "..\..\MainWindow.xaml"
internal System.Windows.Controls.ListBox listBox;
#line 64 "..\..\MainWindow.xaml"
internal System.Windows.Controls.Canvas dragSelectionCanvas;
#line 66 "..\..\MainWindow.xaml"
internal System.Windows.Controls.Border dragSelectionBorder;
(I have deleted some lines for sake of brevity.)
I can see in the .cs file that for every XAML element with an x:Name attribute, Visual Studio generates a corresponding member declaration.
My question: Where are the declarations for those XAML elements, such as the Grid element above as well as the outer Window element (not shown) that do not have an x:Name attribute? Are they declared as well behind the scenes?

They aren't declared anywhere.
XAML code like this:
<Canvas x:Name="dragSelectionCanvas" (Line #64)
Visibility="Collapsed" >
<Border x:Name="dragSelectionBorder" (Line #66)
Opacity="0.5" />
</Canvas>
equals
new Canvas
{
Visibility = Visibility.Collapsed,
Content = new Border { Opacity = 0.5 }
}
You only need a reference to the root control which is this in your xaml.cs class. Things with names are just shortcut references to those object, so that you don't need to go down the logical tree every time.
Once you understand that <SomeClass Property="5"/> == new SomeClass { Property = 5 } everything becomes easier.
For example, in MVVM you set up ViewModel property. You can it in xaml.cs in constructor:
this.ViewModel = new SpecificViewModel() - if it has default contructor
or in xaml:
<MyControl.ViewModel>
<SpecificViewModel/>
</MyControl.ViewModel>
This basically means, that you can contruct fully speced UserControl in only cs file like this:
public class MyControl : UserControl
{
public MyControl()
{
Content = new StackPanel { Content = new TextBlock{ Text = "Sample Text"}};
}
}
Notice that the TextBlock isn't referenced anywhere, but it's still there. Analogical xaml should be now straight forward to write.
You probably noticed the lack off InitializeComponents() call. That's because under the hood it runs the generated from XAML and fills this.Content and sets references to objects with names. No XAML means no need to call this method.
You can find more details here

WPF plugin architecture itemscontrol binding not working

We encountered an interesting behavior on .Net 4.5 (4.6.2 also tested).
The project has multiple plugin dlls.
main exe will load DataTemplates (view) and ViewModels from DLLs using MEF.
if StepView and StepVm and main frame code are in one project (not using MEF), The 2 buttons I show below are working.
if move StepView and StepVm to plugin dll, only second button will work. First one shows binding error in output console. need to talk to manager if I can post error msg here, just wpf standard binding error.
Can anyone share some insights here?
Thanks.
StepView
<UserControl
x:Class="StepView"
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:ScriptHighlighter"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DataContext="{d:DesignInstance local:StepVm}"
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<Grid>
<ItemsControl x:Name="XItemsControl" ItemsSource="{Binding Names}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<Button
Content="Not Wokring in plugin mode"
Command="{Binding ElementName=XItemsControl, Path=DataContext.DeleteCommand}"
CommandParameter="{Binding}" />
<Button
Content="Wokrs in plugin mode"
Command="{Binding Path=DataContext.DeleteCommand, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}, Mode=FindAncestor}}"
CommandParameter="{Binding}" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
StepVm
public class StepVm:ViewModelBase
{
public StepVm()
{
this.Names = new List<string>(){"1", "2", "3"};
}
public List<string> Names { get; set; }
public ICommand DeleteCommand => new RelayCommand<string>(n =>
{
Debug.WriteLine($"logic to delete {n}");
});
}

Because MEF loads your UserControl dynamically into the Visual Tree, you are likely to have issues with NameScope, which I think is whats happening here.
WPF XAML Namescopes
To be honest, your use of ElementName binding is problematic, because your are in a DateTemplate which is an encapsulation boundary, so although it works outside MEF its not a typically supported scenario.

UWP+Prism MVVM - How do I set the value of a view model property via XAML?

I have a property in a view model which I would like to be able to set via the XAML but I can't figure out how to do it.
I have a pretty basic user control (containing a list of items), two of which are to be placed on a page and I would like to be able to set one to be a 'Source' (defined by an enum) and one to be a 'Target'.
[The code below has been stripped down quite a bit so apologies if I've accidentally made some mistakes or missed something out.]
My enumeration is:
public enum ConversionSide
{
Source, // Convert something FROM whatever is here.
Target // Convert something TO whatever is here.
}
I have a page which looks like this:
<Page
x:Class="MyApp.Views.ConverterPage"
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:models="using:MyApp.Models"
xmlns:my="using:MyApp.Controls"
xmlns:prismMvvm="using:Prism.Windows.Mvvm"
prismMvvm:ViewModelLocator.AutoWireViewModel="True"
Style="{StaticResource PageStyle}"
mc:Ignorable="d">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<my:SelectorPage Name="SourceSelector" Grid.Column="0" />
<my:SelectorPage Name="TargetSelector" Grid.Column="1" />
</Grid>
</Page>
...where SelectorPage is a user control (I've called it a 'Page' to make the Prism AutoWire work but that's not the issue here) containing a list of items (all working fine) which looks like this...
<UserControl
x:Class="MyApp.Controls.SelectorPage"
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:models="using:MyApp.Models"
xmlns:my="using:MyApp.Controls"
xmlns:prismMvvm="using:Prism.Windows.Mvvm"
prismMvvm:ViewModelLocator.AutoWireViewModel="True"
mc:Ignorable="d">
<ListView
Grid.Column="0"
ItemsSource="{x:Bind ViewModel.MyList, Mode=OneWay}"
SelectedItem="{x:Bind ViewModel.MySelectedItem, Mode=TwoWay}">
<ListView.Header>
<TextBlock Margin="0,8,0,8" HorizontalAlignment="Center" FontStyle="Italic" Text="Header Text" />
</ListView.Header>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate x:DataType="models:MyListItem">
<my:MyListItemTemplate />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</UserControl>
..with code behind as...
public sealed partial class SelectorPage : UserControl
{
private SelectorViewModel ViewModel => DataContext as SelectorViewModel;
public SelectorPage()
{
this.InitializeComponent();
}
}
SelectorViewModel looks like this...
public class SelectorViewModel : ViewModelBase
{
private ConversionSide _side;
public ConversionSide Side
{
get { return _side; }
set { SetProperty(ref _side, value); }
}
// Many lines have been omitted for 'clarity'.
}
I would like to be able to set the Side property of SelectorViewModel in XAML like this...
<my:SelectorPage Name="SourceSelector" Grid.Column="0" Side="Source" />
<my:SelectorPage Name="TargetSelector" Grid.Column="1" Side="Target" />
(Once Side has been set, I do not expect it to ever change.)
How can I do this?
I've looked at using a dependency property but I can't get it to change the property in SelectorViewModel. When I add one in SelectorPage it's visible in the XAML and I can set it but it doesn't actually do anything so I'm probably not using it right. Putting a dependency property in the view model doesn't sound right to me but I could be wrong.
I've had a look around the web - Microsoft documentation, blogs, articles, stack overflow, etc. - but I can't find anything that explains things well enough for me to figure out what I'm supposed to do. The writings I've found seem to be exclusively about getting information from a bound property - which I'm okay with - but what I'm after is setting a property from the XAML.
Can anyone give my any clues please? I don't know if I'm just a tiny step away from getting what I want or if I'm miles away.

This would set the Side property of the SelectorPage control to Source:
A view sets the property of a view model by two-way bind to it. For example, the following TextBox sets the string property of a view model called Test when you change the text in the TextBox:
<TextBox Text="{Binding Test, Mode=TwoWay}" />
So setting the property of a view model from the view typically applies to controls that handles some kind of input. Any default value of a source property should be defined in the view model:
private ConversionSide _side = ConversionSide.Source;
You shouldn't define the default values in the view.

Change between pages in WPF

I want to make a layout like the one used in any website - the header, sidebar and footer stay the same but the center part. I have multiple pages/windows to show in a wpf blend C# application and they are totally different. For example, stackoverflow has a layout for the homepage and another one for each Question. Here's another exemple:
I had to do that in a previous project and I used a single grid layout and then, for each page, I had to hide() all of them and show that each one on top -
What's the trick? How can I do the same thing in a wpf application? In a typical C# application I would have to open a child window each time but that seems ugly these days.
Thank you in advance!

If you are going to use Pages in WPF, then you will need to read the Navigation Overview page on MSDN. In short however, you can navigate between Pages in a WPF Application by using the NavigationService Class. To change the page from code behind, you could do something like this:
NextPage page = new NextPage();
NavigationService.Navigate(page);
To let the users change the Page, you can use the Hyperlink Class in your Pages:
<Hyperlink NavigateUri="pack://application:,,,/AppName;component/Pages/NextPage.xaml">
Navigate to Next Page
</Hyperlink>
To get your desired page setup, you will have to load your Pages into a Frame, which you can then layout wherever you like in MainWindow.xaml:
<Frame Source="pack://application:,,,/AppName;component/Pages/SomePage.xaml" />

Sounds like you need a custom usercontrol and some databinding.
You can declare DataTemplates in XAML as resources with the model type as key, so that WPF chooses the correct DataTemplate automatically:
Have a main ViewModel, which exposes a ImageSourceViewModel property. This property would either return a CameraSourceViewModel or a FileSourceViewModel, as appropriate.
In your page, the DataContext would be the main ViewModel, and you'd have XAML like this:
Then,
<Page x:Class="Page1"
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:my="clr-namespace:WpfApplication1"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
Title="Page1">
<Page.Resources>
<DataTemplate DataType="{x:Type my:CameraSourceViewModel}">
<my:CameraSourceView/>
</DataTemplate>
<DataTemplate DataType="{x:Type my:FileSourceViewModel}">
<my:FileSourceView/>
</DataTemplate>
</Page.Resources>
<Grid>
<ContentControl Content="{Binding ImageSourceViewModel}"/>
</Grid>
I should point out that this example uses the MVVM pattern to allow the viewmodel layer to decide on the content in the middle. Hopefully this is clear enough, if not, give me a shout and I'll try to expand it!

Let's say I have main view model where I've created a CurrentPage property that will tell which page you want to display.
/// <summary>
/// Returns the page ViewModel that the user is currently viewing.
/// </summary>
public ViewModelBase CurrentPage
{
get { return _currentPage; }
private set
{
if (value != _currentPage)
{
if (_currentPage != null)
_currentPage.IsCurrentPage = false;
_currentPage = value;
if (_currentPage != null)
_currentPage.IsCurrentPage = true;
RaisePropertyChanged(() => CurrentPage);
}
}
}
And in your xaml you can bind your page under some control. Let's say I am doing it inside a Border element.
<!-- CURRENT PAGE AREA -->
<Border Background="White" Grid.Column="1" Grid.Row="0">
<HeaderedContentControl Content="{Binding Path=CurrentPage}"
Header="{Binding Path=CurrentPage.DisplayName}" />
</Border>
You can define view to your view model in resources just like this:
(partially complete XAML)
<UserControl x:Class="BAT.View.BATWizardView"
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:view="clr-namespace:BAT.View"
xmlns:viewmodel="clr-namespace:BAT.ViewModel"
mc:Ignorable="d"
d:DesignHeight="350" d:DesignWidth="600">
<UserControl.Resources>
<!-- These four templates map a ViewModel to a View. -->
<DataTemplate DataType="{x:Type viewmodel:MyComparisonViewModel1}">
<view:MyView1 />
</DataTemplate>
<DataTemplate DataType="{x:Type viewmodel:MyComparisonViewModel2}">
<view:MyView2 />
</DataTemplate>
</UserControl.Resources>
<Grid>
<Border Background="White" Grid.Column="1" Grid.Row="0">
<HeaderedContentControl Content="{Binding Path=CurrentPage}"
Header="{Binding Path=CurrentPage.DisplayName}" />
</Border>
</Grid>
</UserControl>
See if that helps.

Switching part of xaml in View (Caliburn.Micro)

I'd like to switch only some part of my View (which is UserControl) xaml.
For example, I'd like to be able to change only 2nd Grid.
<Grid> //main grid
<Grid Name="1" Grid.Row="1"/>
<Grid Name="2" Grid.Row="2"/>
</Grid
I've tried sth like this:
<UserControl.Resources>
<ControlTemplate x:Key="UsualMode">
<Grid>
...
</Grid>
</ControlTemplate>
</UserControl.Resources>
<Grid> //main grid
<Grid Name="1" Grid.Row="1"/>
<ControlTemplate Name="2" Grid.Row="2" Template="{StaticResource UsualMode}"/>
</Grid>
Then, by using triggers and binding I would be able to switch templates.
Unfortunately, this doesn't work for me due to 'Bootstrapper.cs not found' exception.
How should I do that? I cannot use conductor -> have to load only one View.

http://caliburnmicro.codeplex.com/wikipage?title=All%20About%20Conventions
Read up on the basics of view resolution
Basically you would create the following in your view:
<UserControl.Resources>
<ControlTemplate x:Key="UsualMode">
<Grid>
...
</Grid>
</ControlTemplate>
</UserControl.Resources>
<Grid> //main grid
<Grid Name="1" Grid.Row="1"/>
<ContentControl x:Name="ChildViewModel" cal:View.Context="{Binding ContextBinding}" />
</Grid>
Your parent viewmodel needs to have a 'context' property and a property to house the child VM:
public class ParentViewModel
{
public SomeViewModel ChildViewModel { get; private set; }
public string ContextBinding { get; private set; } // make sure you implement INPC on these properties as is the usual
}
Your view will then be resolved based on the ContextBinding string (as per the CM conventions above).
So if you were to update the string:
ContextBinding = "DetailedView";
CM would then update the UI and try to look for a view called DetailedView in a subnamespace of the current VMs namespace
If you don't want to have a child VM, you can actually get CMs conventions to kick in earlier and apply a context over the current VM, but in this case you would need to create two views which were almost identical apart from the area which you would like to 'swap out'.
My preference would be to create a child VM to handle the sub-area that will swap views as I've shown above