GithubHelp home page GithubHelp logo

sonnemaf / resourcedictionarywithcodebehind Goto Github PK

View Code? Open in Web Editor NEW
6.0 2.0 0.0 286 KB

Visual Studio ItemTemplate for a ResourceDictionary with Code-behind

C# 100.00%
uwp wpf csharp resourcedictionary

resourcedictionarywithcodebehind's Introduction

ResourceDictionaryWithCodeBehind

Visual Studio ItemTemplate for a ResourceDictionary with Code-behind which can be used for x:Bind (UWP only) and EventHandlers (WPF and UWP).

This ItemTemplate is published in the Visual Studio Marketplace

Add New Item dialog

SampleApp

This project also contains a sample app which has a DataTemplates.xaml ResourceDictionary with a Code-behind.

DataTemplates.xaml

This file contains a x:Class attribute in the ResourceDictionary. This class is defined in the Code-behind. It allowes you to use x:Bind markupextensions and eventhandlers. The StackPanel in the DataTemplate has an Loaded event. The TextBlock use x:Bind databinding.

<ResourceDictionary x:Class="SampleApp.Views.Resources.DataTemplates"
                    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:models="using:SampleApp.Models">

    <DataTemplate x:Key="EmployeeDataTemplate"
                  x:DataType="models:Employee">
        <StackPanel Padding="4"
                    Loaded="StackPanel_Loaded"
                    Spacing="8">
            <TextBlock FontWeight="Bold"
                       Text="{x:Bind Name}" />
            <TextBlock Text="{x:Bind Salary}" />
        </StackPanel>
    </DataTemplate>

</ResourceDictionary>

DataTemplates.xaml.cs

The generated DataTemplates class is referenced from the xaml file (x:Class).

using Windows.UI.Xaml;

namespace SampleApp.Views.Resources {
    partial class DataTemplates : ResourceDictionary {
        public DataTemplates() {
            this.InitializeComponent();
        }
        
        private void StackPanel_Loaded(object sender, RoutedEventArgs e) {
            // Some code, this is just an example
        }

    }
}

App.xaml

An instance of the DataTemplates is created in the MergedDictionary. There is a xmlns:resources defined in the Application element.

<Application x:Class="SampleApp.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:resources="using:SampleApp.Views.Resources">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <resources:DataTemplates />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

MainPage.xaml

In the ListView the ItemTemplate is set to EmployeeDataTemplate. This Template is defined in the DataTemplates.xaml

<Page x:Class="SampleApp.Views.Pages.MainPage"
      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:vm="using:SampleApp.ViewModels"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
      mc:Ignorable="d">

    <Grid>
        <ListView ItemTemplate="{StaticResource EmployeeDataTemplate}"
                  ItemsSource="{x:Bind vm:MainViewModel.Current.Employees}" />
    </Grid>
</Page>

resourcedictionarywithcodebehind's People

Contributors

sonnemaf avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.