How to add a class to a xaml page - xaml

this is windows phone 8 app.
I have a class like this in namespace MyApp.Converters:
public class CustomConverter : IValueConverter
{
}
I want to add this to a XAML page, but I don't know how?!
I did this:
xmlns:MyApp.Converters="clr-namespace:MyApp.Converters"
and
<phone:PhoneApplicationPage.Resources>
<MyApp.Converters:CustomConverter x:Key="customConverter"/>
</phone:PhoneApplicationPage.Resources>
I get this error:
Length cannot be less than zero
How to add a class to a XAML page? thanks

we can have the following mapping to the namespace
<phone:PhoneApplicationPage xmlns:c="clr-namespace:MyApp.Converters">
<UserControl.Resources>
<c:CustomConverter x:Key="myconverter">
</c:CustomConverter>
</UserControl.Resources>
and you can bind the key as below wherever you need it
{Binding Converter={StaticResource myconverter}}
also you can refer to the following link which may help you
http://www.mindfiresolutions.com/Giving-alternate-color-to-each-row-of-ListBox-in-Windows-phone-7-2280.php

There seems to be an issue when you put a dot in the prefix name. If you remove it then it should work:
xmlns:MyAppConverters="clr-namespace:MyApp.Converters"
and
<phone:PhoneApplicationPage.Resources>
<MyAppConverters:CustomConverter x:Key="customConverter"/>
</phone:PhoneApplicationPage.Resources>

Related

Dynamically change DataTemplate for a ListView at Runtime

I have 2 DataTemplates for displaying the contents of ClassA or ClassB inside a single ListView; which template to select will be based on a RadioButton selection by the user.
Is it possible to change the ItemTemplate of a ListView (in XAML) based on user input dynamically at runtime?
An example snippet of code:
XAML Page:
<Page...>
<Page.Resources>
<DataTemplate x:Key="ClassAListViewItemTemplate" x:DataType="vm:ClassA" ... />
<DataTemplate x:Key="ClassBListViewItemTemplate" x:DataType="vm:ClassB" ... />
</Page.Resources>
<RelativePanel>
<RadioButton Content="ClassA" ... />
<RadioButton Content="ClassB" ... />
<ListView DataContext="{Binding Path=MainViewModel}"
ItemsSource="{Binding ListOfClassAOrB, Mode=TwoWay}"
ItemTemplate="{StaticResource ClassAListViewItemTemplate}"/>
</RelativePanel>
</Page>
I have stripped the code down somewhat to the essentials, but I would like to be able to change the following at runtime:
ItemTemplate="{StaticResource ClassAListViewItemTemplate}"
I have seen solutions for Classic WPF applications that use Style.Triggers, but these aren't applicable for UWP
Marco Minerva's blog on Adaptive Triggers, RelativePanel and DataTemplate in the Universal Windows Platform talks of using UserControls within DataTemplates to modify the visual state using Adaptive Triggers, but this doesn't take into account switching out of templates based on user input
The closest answer I have found to my problem is another blog he wrote "Dynamically choose DataTemplate in WinRT" where there is an element of code-behind involved - but it only appears to be an if statement - but its the cleanest solution I have come across thus far, and what I'd like to replicate in XAML
Thanks
you need to use overwrite SelectTemplateCore of Data template. Change your view model like this.
Below code will helps you.
public class SampleViewModel : DataTemplateSelector
{
public DataTemplate ClassAListViewItemTemplate{ get; set; }
public DataTemplate ClassBListViewItemTemplate{ get; set; }
protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
{
var itemsData = item as SampleClass; // add your Data class
if (itemsData.IsAddButton == false) // define any property to select the datatemplate
{
return ClassAListViewItemTemplate;
}
else
{
return ClassBListViewItemTemplate;
}
}
}
Add your two datatemplates to one key, and give the key to ItemTemplateSelector property in gridview.
<viewModels:SampleViewModel x:Key="FeedbackTempateSelector"
ClassAListViewItemTemplate="{StaticResource ClassAListViewItemTemplate}"
ClassBListViewItemTemplate="{StaticResource ClassBListViewItemTemplate}">
</viewModels:SampleViewModel>

Using x:Bind inside the GridView's ItemTemplate layout User Control in UWP

In the Universal Windows Platform API, how do I use x:Bind inside of a User Control (intended to be the layout for a GridView's ItemTemplate) to bind to instance properties of a GridView's ItemSource?
Background
I'm trying to re-create the layout found in Windows 10 stock apps like Sports, News, Money, etc.
I'm using a two GridViews for the main area of the app; one for "featured articles" (2 large photos w/ headlines) and one for all the other articles (smaller photos w/ headlines).
I'm able to bind to a data source that I supply in the code behind (a List where NewsItem is a POCO with a Image and Headline property) Here's the pertinent parts of the MainPage.xaml:
<Page ...
xmlns:data="using:NewsApp.Models" />
....
<GridView Name="FeaturedItems" Grid.Row="0">
<GridView.ItemTemplate>
<DataTemplate x:DataType="data:NewsItem">
<Grid Name="mainPanel" HorizontalAlignment="Stretch" Width="500" >
<Image Source="{x:Bind Image}" HorizontalAlignment="Stretch" />
<TextBlock Text="{x:Bind Headline}" />
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
....
The Image and Headline bind just fine (even though they've not been styled correctly). However, instead I think I need to bind to a User Control to get the styling options I want, control over resizing esp. when using Visual State Triggers and to simplify the XAML in general (at least, this was the technique suggested to me.)
So, I added a new User Control to the project (FeaturedItemControl.xaml), and copied in the DataTemplate's child Grid:
<UserControl ... >
<Grid Name="mainPanel" HorizontalAlignment="Stretch" Width="500" >
<Image Source="{x:Bind Image}" HorizontalAlignment="Stretch" />
<TextBlock Text="{x:Bind Headline}" />
</Grid>
</UserControl>
And then back in the MainPage.xaml, I change the DataTemplate to reference the new FeaturedItemControl:
<GridView Name="FeaturedItems" Grid.Row="0">
<GridView.ItemTemplate>
<DataTemplate x:DataType="data:NewsItem">
<local:FeaturedItemControl HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
However, I get the error message for both Image and Headline properties: Invalid binding path 'Headline': Property 'Headline' can't be found on type 'FeaturedItemControl'.
I've tried a few things but am flailing just throwing code at the problem without understanding what I'm doing. Any help would be greatly appreciated.
Thank you for your kind attention.
Using Depechie's answer, I formulated this little cheat cheat for posterity:
Do note that you MUST use this technique to utilize the VisualStateManager with items inside your data bound controls' (GridView, ListView) data templates.
1) Create a User Control.
2) Cut the content of the DataTemplate in your page and paste it into the User Control replacing the template's Grid.
3) Reference the User Control from inside the Data Template:
4) Modify the contents of the User Control changing x:Bind statements to utilize object.property notation:
<UserControl>
<StackPanel>
<Image Source="{x:Bind NewsItem.LeadPhoto}" />
<TextBlock Text="{x:Bind NewsItem.Headline}" />
<TextBlock Text="{x:Bind NewsItem.Subhead}" />
</StackPanel>
</UserControl>
5) Add this in the User Control's Code Behind:
public Models.NewsItem NewsItem { get { return this.DataContext as Models.NewsItem; } }
public ContactTemplate()
{
this.InitializeComponent();
this.DataContextChanged += (s, e) => Bindings.Update();
}
Well it's possible to use x:Bind in user controls, but you'll need to add some extra code behind.
I encountered the same problem in my project, you can see the result here : https://github.com/AppCreativity/Kliva/tree/master/src/Kliva/Controls
So what you need to do is, create a property in the code behind of your user control that points to the correct DataContext.
If you do that, you can use properties of that DataContext in the xaml of your control: for example:
Do note that in the constructor of your control you do need to add: DataContextChanged += (sender, args) => this.Bindings.Update(); because the datacontext will change depending on the page where your control is used!
Then on the page where you are placing this control, you'll also need to do the same to enable the x:bind to work.
You'll see this in my example on the MainPage.DeviceFamily-Mobile.xaml and MainPage.xaml.cs files.
Hope this helps.
x:Bind isn't really hierarchical like Binding/DataContext is. Additionally when you're not directly inside a DataTemplate (such as inside your user control) the object that x:Bind tries to use is 'this' rather than 'this.DataContext'. My current line of thinking on how to solve this sort of issue is to try not to use UserControls anywhere. Instead preferring DataTemplates contained within a ResourceDictionary. There are some pretty strong caveats to this approach though, you will for example crash the xaml compiler if you use x:Bind inside a data template that was created from the ResourceDictionary item template (add new item). you can find a pretty complete example here https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlBind its important to note in the sample where they show the ResourceDictionary being used that its not actually just a ResourceDictionary.xaml its also a ResourceDictionary.xaml.cs (this is where the generated code from x:Bind ends up)
Another option is to add Headline and Image as properties on your user control and x:Bind them from the template, then inside the user control x:Bind as you are currently doing, but now the x:Bind generated path 'this.Headline' will exist. Unfortunately the order things are actually bound means that the x:Bind's you have inside your user control will have to be OneWay rather than the default OneTime. this is because x:Bind OneTime does the bind inside the InitializeComponent call, and any set of properties/DataContext stuff doesn't get done until after that has already run.
So to sum this up, you have two options, use data templates everywhere, or bind to properties that are directly on the user control.

XAML Margin in resources

How do I define XAML margin in Windows universal app resources? I tried to define it as
<Thickness x:Key="MyMargin" Left="10" Top="20" Right="10" Bottom="20" />
by this does not compile, I get
XamlCompiler error WMC0100: XAML Thickness type cannot be constructed. In order to to be constructed in XAML, a type cannot be abstract, interface, nested, generic or a struct, and must have a public default constructor
The syntax for Windows XAML is as follows:
<Thickness x:Key="myMargin">10,20,10,20</Thickness>
which could be simplified to:
<Thickness x:Key="myMargin">10,20</Thickness>
I had it working by binding it to a String:
<x:String x:Key="MarginLeftPage" >120,0,0,0</x:String>
[...]
Grid Margin="{StaticResource MarginLeftPage}">

StaticProperties in Resource Dictionary

My XAML has been working fine, referencing a Static Property of a static class
<TextBox IsReadOnly="{x:Static loc:StateMachine.IsReadOnly}" />
I now want to refactor the above, so I can use a ResourceDictionary
So, my resource dictionary is
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:stat="clr-namespace:MyProjectHelper"
>
<stat:StateMachine x:Key="StaticResources" />
</ResourceDictionary>
On my XAML, I removed the namespace reference called loc (which I was using) and I add a reference to the resource dictionary (which works since my views show and converters do their job) but when I add the following code
<TextBox IsReadOnly="{StaticResource StaticResources.IsReadOnly}" />
I get a runtime exception
'Provide value on 'System.Windows.StaticResourceExtension' threw an exception.' Line number '50' and line position '97'.
My research shows this is something wrong wit the XML - it could be a typo (checked) or an unexpected value but I can't see what I need to do to fix this despite looking over SO and Google
I also tried
<TextBox IsReadOnly="{Binding Source={StaticResource StaticResources}, Path=IsReadOnly}" />
but the exception is
'The invocation of the constructor on type 'SeoHelper.StateMachine' that matches the specified binding constraints threw an exception.' Line number '9' and line position '6'.
{StaticResource } binding needs to be able to instantiate your class, and it had problem to do so because the class was static. Your last trial would've worked if only the class wasn't declared as static.
Possible workaround if you need to keep your class static is, you can register the property instead of the class to resource dictionary using StaticExtension :
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:stat="clr-namespace:MyProjectHelper"
>
<x:StaticExtension Member="stat:StateMachine.IsReadOnly" x:Key="StaticResources"/>
</ResourceDictionary>
Then binding to the resource can be done as usual :
<TextBox IsReadOnly="{StaticResource StaticResources}" />

Silverlight Data Binding in Nested Controls

Hi guys I am working with SL4 and MVVM application actually i am stuck some where i might be doing some thing wrong thats why need your help, here is my scenario
//suodo code
public class EmployeeModel
{
//code
Public List<Shifts> Employeeshifts{get;set;}
}
public class ShiftModel
{
//code
}
Viewmodel for main page
public class MainVM
{
MainVM()
{
EmployeeList = DateFromSomeService;
}
Public List<Employees> EmployeeList{get;set}
Public DelegateCommand ClickBindingCommand{get;set;}
}
MainPage.xaml
<ItemsControl ItemSource={Binding EmployeeList}>
<ItemTemplate>
<DataTemplate>
<controls:EmployeeControl/>
</DataTemplate>
</ItemTemplate>
</ItemsControl>
Employeecontro.xaml
<ItemsControl ItemSource={Binding EmployeeShifts}>
<ItemTemplate>
<DataTemplate>
<controls:ShiftControl Click={Binding ClickBindingCommand}/>//here is problem this command is in mainviewmodel
</DataTemplate>
</ItemTemplate>
</ItemsControl>
MainPage.cs
this.DataContext = new MainVM();
ClickBindingCommand is defined in main VM but it is bound within shift control and shiftcontrol's data context is shift class which is my model class. If I declare this command in my shift model class than it works, means if I click on shift control this property is called but I dont want this because I want it in my main view model, where am I wrong?
Should I declare it in my shift model class but in this way i will bind directly my model to my view?
Use a DataContextProxy or a RelativeSource Binding. This will allow your Command to bind/fire on your MainViewModel.
Another alternative is to use the Caliburn Micro framework. You can then attach an action to your button in the child and click events will bubble up to the parent.
This "toolkit" offers an implementation of FindAncestor in silverlight. Try this:
http://blog.thekieners.com/2010/09/08/relativesource-binding-with-findancestor-mode-in-silverlight/
I ran into this same issue and what fixed it for me was to name my UserControl then reference that name in the binding.
Here is the syntax:
{Binding ElementName=SomeTextBox, Path=Text}
Bind to the “Text” property of the element XAML
element with name=”SomeTextBox” or x:Name=”SomeTextBox”.
So here is my user control:
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SupportReports.Workflow.Portfolio.PortfolioManager"
mc:Ignorable="d"
Name="PortfolioManagerControl"
>
And here is the nested dataTemplate that binds to my command in my main view model
<cmd:EventToCommand Command="{Binding ElementName=PortfolioManagerControl, Path=DataContext.PortfolioManagerProjectSelectedCommand}" CommandParameter="{Binding Text, ElementName=ProjectName}" />