View source for Documentation:Wpf materialdesign

You can use this page to identify retired Material Design guidance for MDriven WPF applications and find the current documentation for styling, icons, and custom controls.
== Status ==
'''This page documents behavior that is invalid for versions after 2019-05-07.''' Do not use the workaround described below in a current application.

For current WPF application and ViewModel styling, use [[Documentation:Styling WPF Applications and ViewModels]]. For the WPF client architecture and generated user interface, see [[Documentation:Windows WPF client]].
== Current guidance ==
MDriven WPF applications can be styled through XAML resource dictionaries and style references on ViewModel columns. A ''resource dictionary'' is a XAML file that defines reusable resources such as brushes and control styles. A ''StyleRef'' identifies the style that a ViewModel column should use.

For example, when a ViewModel column has the StyleRef <code>Style1</code>, you can define separate styles for the generated display and edit controls using the naming convention described in [[Documentation:Styling WPF Applications and ViewModels]]:

<syntaxhighlight lang="xml">
<Style x:Key="Style1.TextBlock">
  <Setter Property="TextBlock.FontSize" Value="36"/>
</Style>

<Style x:Key="Style1.TextBox" TargetType="{x:Type TextBox}">
  <Setter Property="FontSize" Value="36"/>
</Style>
</syntaxhighlight>

Use [[Documentation:StylesInModel]] when you want styles defined in the model to be generated into a WPF resource dictionary. Use [[HowTos:Custom Controls in ViewModel Aided Views]] when a generated ViewModel view needs a custom WPF control while retaining model-driven data binding.
=== Material Design icons ===
For Material Design icons in WPF, follow [[Documentation:Material Design Icons]]. That page describes the included font resource, the <code>materialdesigniconsfont</code> font-family resource, and the hooks on <code>ViewModelWPFUserControl</code> for resolving named icons.

For action-button icons in Turnkey, set the <code>Icon</code> tagged value on the ViewModel column that contains the action. See [[Documentation:Action Controls]] for the icon-name convention and the <code>IconPosition</code> tagged value.
== Historical note: retired layout workaround ==
Earlier MDriven WPF applications used MaterialDesign-styled controls from the MaterialDesignInXaml library. In that older implementation, some layouts could repeatedly increase the size of controls during initialization. The observed pattern was that a line beneath a control was data-bound to the control width, and the two measurements could affect one another in a repeating layout cycle.

The former workaround was to set a control's <code>MaxWidth</code> to <code>3.14</code>. MDriven treated that value as a temporary initialization limit, then removed it after the initial ViewModel-driven user-interface setup so the control could again size automatically.

'''Do not add <code>MaxWidth="3.14"</code> to new or maintained WPF views.''' It is historical behavior only, and the original guidance states that it is invalid after 2019-05-07. If a current view grows or continuously remeasures, review its XAML layout and bindings, then use the current WPF styling and custom-control guidance linked above.

MDriven uses the MaterialDesign styled controls provided by http://materialdesigninxaml.net/ internally, but you can also use them in MDriven WPF applications. 
* These Nuget assemblies work very well in providing a visual style based on Google's [https://material.io/ MaterialDesign concept]. 
We have noticed an elusive problem: growing UIs - every second placed control gets a little bit bigger in a never-ending loop. I have been unable to pinpoint the reason but it looks like if the line under the control is databound to the width of the control, they appear to influence each other in a ping-pong way that gives the effect of a never-ending loop.
== See also ==
* [[Documentation:UI&Styling]]
* [[Documentation:Styling WPF Applications and ViewModels]]
* [[Documentation:StylesInModel]]
* [[Documentation:Material Design Icons]]
* [[Documentation:Windows WPF client]]
* [[HowTos:Custom Controls in ViewModel Aided Views]]

[[Category:Desktop UI (WPF/WinForms)]]
[[Category:Intermediate-Friendly]]
[[Category:Priority 60]]
[[Category:UI & Styling]]
[[Category:WPF UI with MDriven (WECPOF)]]