Giter Club home page Giter Club logo

wpf-designer-helper's Introduction

wpf-designer-helper

A library that will help with displaying fake data in the Designer in Visual Studio. You shouldn't have to run your app to see what it looks like while you are editing XAML.

Installation

The package is installed via nuget.org:

  • Package Manager Console: Install-Package dotnetKyle.WpfDesignerHelper
  • Dotnet CLI: dotnet add package dotnetKyle.WpfDesignerHelper

Usage:

In your ViewModel's constructor, you can set the properties that are bound and this code will only run in the designer and won't affect runtime code.

using WpfDesignerHelper;

namespace Example
{
    public class AutoMobileViewModel
    {
        public MyViewModel()
        {
            if(Designer.Active)
            {
                this.Make = "Toyota";
                this.Model = "Tacoma";
                this.Year = "2020";
                this.WheelSizes = new string[]
                { 
                    "265/75 R15", "265/75 R15", 
                    "265/75 R15", "265/75 R15" 
                };
            }
        }

        public string Make { get; set; }
        public string Model { get; set; }
        public string Year { get; set; }
        public IEnumerable<string> WheelSizes { get; set; }    
    }
}

In the XAML for the View that uses the View Model, you can specify a > design-time ViewModel by setting the d:DataContext to use, like this:

<Window x:Class="Example.MainWindow"
        ...
        xmlns:local="clr-namespace:Example"
        mc:Ignorable="d"
        d:DataContext="{d:DesignInstance Type=local:AutoMobileViewModel, > IsDesignTimeCreatable=True}"
        ...
        >
        <!-- Most important part is the above d:DataContext line. -->
    <StackPanel Orientation="Vertical">
        <!-- Make -->
        <StackPanel Orientation="Horizontal">
            <Label Content="Make:"/>
            <TextBlock Text={Binding Make}/>
        </StackPanel>

        <!-- Model -->
        <StackPanel Orientation="Horizontal">
            <Label Content="Model:"/>
            <TextBlock Text={Binding Model}/>
        </StackPanel>

        <!-- Year -->
        <StackPanel Orientation="Horizontal">
            <Label Content="Year:"/>
            <TextBlock Text={Binding Year}/>
        </StackPanel>
        
        <!-- Wheels -->
        <StackPanel Orientation="Horizontal">
            <Label Content="Wheels:"/>
            <ItemsControl ItemsSource="{Binding WheelSizes}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Vertical"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding}"/>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </StackPanel>
    </StackPanel>
</Window>

wpf-designer-helper's People

Contributors

dotnetkyle 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.