Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to see design-time data-binding in XAML editor (it works in runtime)?

I data-binded version number to appear as follows:

<Window <!-- ... --> DataContext="{Binding RelativeSource={RelativeSource Self}}">     <Grid>         <TextBlock>             Version is:              <Run Text="{Binding Version, Mode=OneWay}"></Run>             and advancing...         </TextBlock>     </Grid> </Window> 

and it's working during run-time.

How can I see it during design-time in the XAML editor in Visual Studio 2012 ? I only see:

Version is: and advancing... 

instead of:

Version is: 5.2.2 and advancing... 

EDIT - My solution:

Jure's answer below works, but I ended up using a dummy view-model static code technique, which works better for me since the data is a mock of the real view-model type:

d:DataContext="{Binding Source={StaticResource DesignViewModel}}" ... 
like image 693
Tar Avatar asked May 06 '13 15:05

Tar


People also ask

How do I view XAML designs?

To open the XAML Designer, right-click a XAML file in Solution Explorer and choose View Designer. to switch which window appears on top: either the artboard or the XAML editor.

How does binding work in XAML?

Data binding is a mechanism in XAML applications that provides a simple and easy way for Windows Runtime Apps using partial classes to display and interact with data. The management of data is entirely separated from the way the data is displayed in this mechanism.

What is design time data?

Design-time data is mock data you set to make your controls easier to visualize in the XAML Designer.

What is the data binding concept and how binding works in WPF?

Data binding is a mechanism in WPF applications that provides a simple and easy way for Windows Runtime apps to display and interact with data. In this mechanism, the management of data is entirely separated from the way data. Data binding allows the flow of data between UI elements and data object on user interface.


2 Answers

Make sure that you have these definitions at the root tag of your xaml file (in your case the Window tag):

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" 

Then, anywhere in the xaml (including the root tag) you can add this:

d:DataContext="{d:DesignInstance myNamespace:MyViewModel, IsDesignTimeCreatable=True}" 

Now you just need to make sure that you initialize the values in a constructor or have default values for properties.

If you need to run a special logic for design mode, look at this answer.

like image 141
XAMeLi Avatar answered Sep 29 '22 03:09

XAMeLi


Short answer, you can't do it that way. VS designer is not executing runtime code and your binding will not be resolved in design time. But there is support for design time data through d:DesignData extension.

You can set design data context this way:

<Window xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"      mc:Ignorable="d"      d:DataContext="{d:DesignData Source=/SampleData/SomeSampleData.xaml}"     DataContext="{Binding RelativeSource={RelativeSource Self}}"> <Grid>     <TextBlock>         Version is:          <Run Text="{Binding Version, Mode=OneWay}"></Run>         and advancing...     </TextBlock> </Grid> 

d:DataContext={d:DesignData.... sets the desing time DataContext that will be used to resolve bindings in VS designer surface. You can set it to a xaml file that contains your sample data. Sample xaml file should be built with "DesignData" build action.

See more here: http://blogs.msdn.com/b/wpfsldesigner/archive/2010/06/30/sample-data-in-the-wpf-and-silverlight-designer.aspx

like image 43
Jurica Smircic Avatar answered Sep 29 '22 04:09

Jurica Smircic