To discuss your ideas for contributing please send an email to

netherlandsmark@proton.me

Please include in the subject line: guest post for [website]

And send us the article you’d like to post attached or in the email itself.

General Submission Guidelines

What topics can I write about?

We have no limit on which subject you can write about, however some websites retain the last call on accepting a guest post or not, they will all be read before posting by our editors.

What language can I write in?

We accept only posts in english, if you need a post in another language please email us first to discuss in which websites we could accept it in.

However you could write in english and include foreign anchor texts for your links, we do accept it that way.

Can I contribute an edit to an existing post on the site?

Yes you can, tell us which page and which piece of content you’d like to add or edit with your respective edit or addition including your link in that piece of content.

Use Original Content

The content you submit must be unique and not be posted anywhere else on the internet, we’ll check with copyscape your entire article.

Be Free of Errors

Ensure your submission contains no typos or grammatical errors.

Length of Content

Your article must be between 1000 and 3000 words, please stick to this guidelines, any smaller or bigger article will be rejected.

Time it takes to publish

After approval the article takes 2-4 days to be published in your desired website, you’ll be notified via email about the published status of your article.

Links

You can insert up to 3 outbound links in the body of your article.

<!-- Change this -->
<TextBox Header="Username" Text="{Binding Username, Mode=TwoWay}"/>

<!-- to this -->
<TextBox Header="Username" Text="{x:Bind Username, Mode=TwoWay}"/>

In my case I was using MVVM to bind properties to my view via a ViewModel. Because the property Username is on my MainPageViewModel and not my MainPage code behind class, the compiler wasn’t able to find the property Username.
In this case I received an error message at compile time stating “Invalid binding path ‘Username’ : Property ‘Username’ can’t be found on type ‘MainPage’”. This is because the compiled binding gets evaluated at compile-time and it cannot find any property on the partial class MainPage to match.

In module 4 of Jerry Nixon and Andy Wigley’s MVA Course, A Developers Guide to Windows 10, Andy mentioned a technique to automatically bind a strongly-typed property called ViewModel on the Page code-behind like this.

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        DataContextChanged += (s, e) =>
        {
            ViewModel = DataContext as MainPageViewModel;
        };
    }

    public MainPageViewModel ViewModel { get; set; }
}

Now every time the DataContext changes, the ViewModel property gets updated. You also have to change the Binding to point to the new strongly typed ViewModel property (note the new “ViewModel.” in the binding expression).

Text="{x:Bind ViewModel.Username}"

This fixed my problem, but I wanted a solution that I could apply to a base class and leverage across all pages. In order to maintain the strongly typed nature of the base class I had specify the ViewModel type somewhere in the code behind. I couldn’t see any way around that. At the same time, I wanted to minimize the occurences where this type had to be specified. After a couple variation using Lambdas and Expressions, which ultimately led to reflection of some type. I opted for full reflection approach based on convention. The convention I settled on required a property called ViewModel on the concrete page. Then on the BasePage I just look for this type and set it whenever the DataContext changes.

public sealed partial class MainPage : BasePage
{
    public MainPage()
    {
        this.InitializeComponent();
    }

    public MainPageViewModel ViewModel { get; set; }
}

In order to achieve this, the BasePage logic needs to be a bit more complex, as it’s dealing with Reflection.

public class BasePage : Page
{
    private const string ViewModelPropertyName = "ViewModel";

    public BasePage()
    {
        DataContextChanged += (s, e) =>
        {
            SyncVmWithDataContext();
        };
    }

    public void SyncVmWithDataContext()
    {
        var vmProperty = this.GetType().GetProperty(ViewModelPropertyName);
        if (vmProperty != null)
        {
            vmProperty.SetMethod.Invoke(this, new[] { DataContext });
        }
    }
}

Another alternative is to make ViewModelPropertyName a public property that can be set in the XAML and use that property name to override the convention.

I hope you like this approach. All the code can be found on my github page at http://github.com/bendewey/ViewModelCompiledBinding

I search online and found a technique that included adding an index property to the model in question and then adding a converter to the DataTemplate. This wasn’t ideal because it only changed the contents of the list item, so depending on padding and content alignment you’d see gaps around the row background. I also didn’t like the code smell of modifying my data model objects with UI code.

What I wanted was to override the ListViewItem control’s Background property. You could use the ListView.ItemContainerStyle property and set the background using a style, but unfortunately the style’s context wouldn’t have any way of knowing the index of the item relative to the full source collection.

The option I used was to override a ListView control and create an AlternatingRowListView. Then by overriding the PrepareContainerForItemOverride, which is responsible for the setting up the ListViewItem control after it’s be created, you could modify the background color.

public class AlternatingRowListView : ListView
{

    protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
    {
        base.PrepareContainerForItemOverride(element, item);
        var listViewItem = element as ListViewItem;
        if (listViewItem != null)
        {
            var index = IndexFromContainer(element);

            if ((index + 1) % 2 == 1)
            {
                listViewItem.Background = new SolidColorBrush(Colors.White);
            }
            else
            {
                listViewItem.Background = new SolidColorBrush(Colors.Gray);
            }
        }
        
    }
}

This code uses a method on the ListView base class called ItemFromContainer(), which simply gives you the index of the item relative to the ListView’s source collection. With that index you can set the ListViewItem’s Background color based on a modulus of 2. Although, using hard coded colors for the background doesn’t make it very usable across other designs. This is where dependency properties come into play. They allow the control to expose properties to XAML, where you can set them to any Brush or Resource you’d like. To do this you have to specify them as they are below and update your overridden method from before with these new properties.

public class AlternatingRowListView : ListView
{
	public static readonly DependencyProperty OddRowBackgroundProperty =
		DependencyProperty.Register("OddRowBackground", typeof(Brush), typeof(AlternatingRowListView), null);
	public Brush OddRowBackground
	{
		get { return (Brush)GetValue(OddRowBackgroundProperty); }
		set { SetValue(OddRowBackgroundProperty, (Brush)value); }
	}
	
	public static readonly DependencyProperty EvenRowBackgroundProperty =
		DependencyProperty.Register("EvenRowBackground", typeof(Brush), typeof(AlternatingRowListView), null);
	public Brush EvenRowBackground
	{
		get { return (Brush)GetValue(EvenRowBackgroundProperty); }
		set { SetValue(EvenRowBackgroundProperty, (Brush)value); }
	}

    protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
    {
        base.PrepareContainerForItemOverride(element, item);
        var listViewItem = element as ListViewItem;
        if (listViewItem != null)
        {
            var index = IndexFromContainer(element);

            if ((index + 1) % 2 == 1)
            {
                listViewItem.Background = OddRowBackground;
            }
            else
            {
                listViewItem.Background = EvenRowBackground;
            }
        }
        
    }
}

After this, you can put it all together by using your new control in place of a ListView.

<Page
    x:Name="pageRoot"
    x:Class="ZebraStripedListView.ItemsPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:ZebraStripedListView.Controls">

	<controls:AlternatingRowListView 
			ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
			OddRowBackground="{ThemeResource GridOddRowBackgroundBrush}" EvenRowBackground="{ThemeResource GridEvenRowBackgroundBrush}">
		<controls:AlternatingRowListView.ItemTemplate>
			<DataTemplate>
				<Grid>
					<Grid.ColumnDefinitions>
						<ColumnDefinition Width="300" />
						<ColumnDefinition Width="*" />
					</Grid.ColumnDefinitions>
					<TextBlock Text="{Binding Title}" Grid.Column="0" />
					<TextBlock Text="{Binding Subtitle}" Grid.Column="1" />
				</Grid>
			</DataTemplate>
		</controls:AlternatingRowListView.ItemTemplate>
	</controls:AlternatingRowListView>
</Page>

This is what the final result looks like for my sample code.

I’ve uploaded the full code to my GitHub account at http://github.com/bendewey/ZebraStripedListView. I hope this is useful to other who encounter a similar scenario.

As with all my demos here at VSLive the all the code is available on GitHub at https://github.com/bendewey/XamlAntiPatterns, you can also see all my slides here.

Thanks again to anyone who came out. I’d love to hear from you if you have any comments about my session or if you are writing apps. Feel free to add a comment here or reach out to me directly.