When creating a MVVM Light UWP app, I am not able to get programmatic design time data working via my View Model. I believe this may be due to Visual Studio 2015 adding in the property names of the bindings in the designer instead. I have confirm this be creating a blank MvvmLight (Win10Univ) app in the project templates (MVVM Light 2015 for VS2015 - Version 5.2.0.0) and it clearly shows "WelcomeTitle", the name of the property instead of "Welcome to MVVM Light [design]" that is set up in the DesignDataService class.
MVVM Light Main Page capture in designer showing incorrect design time data
When seeing this problem in my own project, I am using something like this in my View Model:
if (this.IsInDesignMode)
{
// Load design time data when in design mode
this.Duration = "2 HRS 13 MINS";
}
I am then binding to the property in my View with the data context set as follows:
<Page.DataContext>
<Binding Path="FooBarPageViewModel" Source="{StaticResource Locator}" />
</Page.DataContext>
Now, normally the above is all you need to do as per the MVVM Light project template app, but I have tried to following with no success:
d:DataContext="{Binding FooBarPageViewModel, Source={StaticResource Locator}}"
I have also tried using x:Bind, but still see the same problem.
So does anybody know how to resolve this problem or has come across something similar?
Note: This issue may not be just related to MVVM Light and could instead be a UWP platform issue.
Okay, so building the template MVVM Light UWP app in x86 architecture allows you to see the design time data in the Visual Studio designer. However, a few of points:
When in x86 mode, you have to enable the project code button in the designer to see the design time data.
If you have a combination of x:bind and runtime binding in the XAML page using x86 then the designer crashes. You can disable the project code in the designer to fix the crash, but then design time data won't work again.
When in x64 mode, it seems you can't enable the project code button, thus resulting in this original problem.
Related
We are developing a Windows10 Universal App (UWP). We have huge issues related to how RelativePanel behave depending of syntax and pc.
We have dynamic data response from a web service and we have to display a dynamic structure of UI controls to render the GUI.
We are trying to use RelativePanels with child elements composed of ItemsControls rendering different type of sub data (Addresses, Phones, etc..).
The ItemTemplate of each ItemsControl' item is a Template composed of a RelativePanel.
Now, the weird stuff happened differently between design and runtime.
At design time, when we want to set Target UIElement of the RelativePanel, we can use the following syntax:
Ex: RelativePanel.Below="EntryMobileNumbers" or
Ex: RelativePanel.Below="{Binding ElementName=EntryMobileNumbers}" />
They are supposed to both work but they don't.
For some RelativePanels’ child elements, if we use the first syntax, the xaml designer bugs and display weird error message
about “value must be of type UIElement”.
Looked on forums for this type of Xaml error and it seems for some developers it’s better to use the second syntax with the Binding.
The good side of it is with that the design is not displaying the squigglys and the error BUT the pb is at Run-time;
the result is wrong and some elements are overlapping.
With syntax 2
With syntax 1
We have also different issues between dev pc’s. With the VS2015 Enterprise installed on all pc’s,
some are displaying squigglys or crash the Xaml Designer with Syntax 1 and some are not.
We also tried to update VS2015 with yesterday’s RC1. It fixed the issues on one of the Pc and not on the others.
PS. All samples out there are very simple. I would very happy to see a "real life" application.
Like e.g. Money from the store to see how layout are managed
RelativePanel.Above="{Binding ElementName=SubTitleDesktop}"
instead of
RelativePanel.Above="SubTitleDesktop"
and it will helps you get rid off errors
I hope somebody can help.
I've spent some time researching the best way to bind an event to a ViewModel command using the MVVM pattern when developing a Universal App. I'm using MVVM Light.
As a test I'm using the SelectionChanged event of a ComboBox.
I've read a few people that have pinched the Behaviours SDK from the Windows 8.1 / WinRT framework and had some success with that. I have also included the Universal App behaviours SDK in my project and tried the following (put together from Windows 8.1 examples but using the UWP SDK).
XAML
<Page
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:core="using:Microsoft.Xaml.Interactions.Core" />
...
<ComboBox ItemsSource="{Binding InputQuantities}">
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="SelectionChanged">
<core:InvokeCommandAction Command="{Binding SomeComboBoxCommand}" CommandParameter="Foo" />
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</ComboBox>
View Model
public RelayCommand SomeComboBoxCommand {get; set;}
However, the core:InvokeCommandAction isnt part of the Behaviours SDK and i get Invalid Type: expected type is 'Microsoft.Xaml.Interactivity.ActionCollection'. I've tried to use an ActionCollection.... but I'm not sure I know what I'm doing with that.
Ive successfully got it to work with compiled bindings and using Laurent's Blog Post:
XAML
<ComboBox ItemsSource="{Binding InputQuantities}" SelectionChanged="{x:Bind Vm.SomeComboBoxCommand }" />
View Model
public void SomeComboBoxCommand(object sender, SelectionChangedEventArgs e){//do stuff}
I know this isnt what Laurent is intending to demonstrate here and I think doing this is breaking the decoupling of the view and VM by then having to reference a UI component in my view model to get the selected item. But I've seen references to doing this during my research.
So how can I get this working using The Universal App interaction behaviours, if that's the right way to do it of course?
Update 1.
This is what I attempted to add, believing, incorrectly that I was adding the universal app behaviours SDK. I didn't notice at the time that it was targeting Windows 8.1.
However, my questions still stands: Why wont the InvokeActioncommandwork and why is it throwing the mentioned error? I will look at the other posts as soon as I get to work.
Update 2
After testing this on my works PC (exact same code as above, 1st example and the same behaviours SDK) it works fine and I'm getting the behaviour that I would expect. I need to test again on my home PC to see what has gone wrong. (Thanks to Justin XL for sticking with me)
Update 3
For completeness, after returning home I got the latest version of my project (from being checked in on my works PC) and it now also works on my home PC. I'm not sure what state my Visual Studio was in but it had sufficiently confused me enough to post this question. At least this should serve as a document on how to do what is described in the title. Thanks for all your help.
We seem to be getting this question a lot lately, in several different variants...
I'm not familiar with Universal App but is there any specific reason you're trying to use an event? WPF/Silverlight etc are designed to be data driven, all you need to do is bind the ComboBox's SelectedItem member to a property in your view model and the setter will get called whenever the user selects a new item. Often times you have to do exactly the same processing in response to other parts of your view model changing it (e.g. in Master-Child views) so having that logic in a single place generally makes for a much cleaner architecture.
Check this link: MVVM EventBinding Library ,explains about MVVM EventBinding. This purely decouples the View & View model & pass only the arguements to the command.
For my windows 8 application i am trying to navigate between pages with out using code behind.
For example, i have one image in my UI without creating tapped event for that image i need to navigate to another page,
<Image Source="ms-appx:///Assets/Logo.png" Width="155" Height="110" Tapped="{ // Navigation method here }"/>
Is it possible to navigate between pages like this...? If possible, how can i get this to work??
XAML is just a declarative language without action part so code behind is an essential part of it.
All interactions work via events and event can be handled in a code behind only. So what you want is not possible with XAML(at least with WinRT XAML).
If you are asking if you can specify the code inside the .xaml file, then no, that is not possible.
If you are asking if you can avoid adding code to the .xaml.cs file, then yes, that is possible. You will still need to specify a method but it can even be done as a simple lambda. You will need to use the Command hooks rather than the Event Hooks, e.g.
<Button Command="{Binding GoConnectionCommand}" ... />
The code for this command is usually defined in the ViewModel as part of the MVVM pattern, and Josh Smith explains it far better than I will.
AlSki mentioned using a ViewModel. Although technically the ViewModel is not part of the "code behind" for the XAML file, it's still code and I believe you were asking for a no code solution.
ixSci is correct that there is no way to do this out of the box without code behind in WinRT XAML.
In full WPF it's possible to do this using a behavior called NavigateToScreenAction. You can read about it here. Unfortunately behaviors don't ship out of the box with WinRT, but they can be added back in by an open source project called WinRtBehaviors.
There is no NavigateToScreenAction behavior for WinRT, but one could be created. There is a good article on creating behaviors with the library here. It will obviously require code to create the behavior, but after it's created you could use it in XAML without any code.
Really, the short answer is it's not possible to navigate without code on WinRT.
Dev support, design support and more awesome goodness on the way: http://bit.ly/winappsupport
Converting a WPF application from .Net 4.0 to Metro.
It uses HeaderedItemsControl in various places.
I have not been able to find that control or a replacement candidate in Metro (Windows.UI.Xaml namespace)
So what is the recommended control in Metro to provide the functionality of HeaderedItemsControl?
You could easily create one by deriving from ItemsControl and adding a few simple dependency properties. You can see which properties are present in the WPF version here. You might not need all of them, but from a quick glance I can see a Header property which is just an object type. You would put a ContentPresenter in your HeaderedItemsControl's ControlTemplate and bind its Content to the HeaderProperty using TemplateBinding. Then bind the HeaderTemplate to the ContentTemplate of the ContentPresenter, etc.
Not sure how useful it is though to port WPF XAML code directly to WinRT. You're just asking for trouble in terms of code compatibility, but also porting a likely desktop-designed UI to a more touch-centric world.
Are there any libraries which
Allow to draw svg direct to a Windows Forms application
to a WPF application
I draw graphics and design everything with Inkscape, because I love that program.
Then I have those stunning svgs and have to either export them to png (WinForm) to use them or convert them to xaml-code (WPF) (Kaxaml helps me).
Is there a way to directly use my svgs?
Wow, I just read that Inkscape supports saving as XAML. I didn't realize that up to now shame.
But that still doesn't solve my problems with WinForms...
I personally hate how there's no native support for SVG in Microsoft's products/development tools. I've found two fairly complete but still immature SVG libraries that seem to be active as of this writing, definitely in need of contributors though.
WPF : Svg2Xaml (open source)
WinForms : SVG rendering engine (open source)
IIRC both libraries output a Drawing object which can be used directly through the Image class; You'll figure it out, they're both pretty straightforward to use.
If you want to load them directly into WPF,
I got better results from: https://github.com/ElinamLLC/SharpVectors
Yes, you can use ReaderSVG from AB4D to get WPF directly from XAML.
Regarding WinForms, removed a previous link to Kent Boogart's example as it was deleted sometime in 2019.
Copy below from this dotnetways post
To host a WPF control or WPF user control (wpfControl in this example) into Windows Form application, create an instance of ElementHost Class and add your WPF control/user control as child to the instance of ElementHost.
using System.Windows.Forms.Integration;
//Assembly: WindowsFormsIntegration (in WindowsFormsIntegration.dll)
//...
ElementHost elementHost = new ElementHost();
elementHost.Dock = DockStyle.None;
elementHost.Child = wpfControl;
Now, add the instance of ElementHost to a container control in your windows form (for instance containerPanel here)
containerPanel.Controls.Add(elementHost);