Develop Reference

How to separate xaml markup into different file in uwp?

I have a very big xaml markup in MainPage.xaml. More I add more it becomes a mess. Can I split my xaml markup into different files or store it in a ResourceDictionary and load it into MainPage.xaml?

Not known to me. What I do is, for example, deposit the sytling of my controls in the App.xaml. For example, for a TextBlock element:
<Application.Resources>
<Style x:Key="TextBlockStyle1" TargetType="{x:Type TextBlock}">
<Setter Property="TextWrapping" Value="NoWrap"/>
<Setter Property="TextTrimming" Value="None"/>
<Setter Property="FontFamily" Value="CalibriLight"/>
<Setter Property="Foreground" Value="WhiteSmoke"/>
</Style>
</Application.Resources>
In Mainpage.xaml I grab it so:
<TextBlock Style="{DynamicResource TextBlockStyle1}"/>
Thus, you save a lot of time while styling and your Mainpage.xaml is much tidier.

Yes,you can create a ResourceDictionary and put your style in it.Then use MergedDictionaries to load it into MainPage.For more information you can view this document.
in ResourceDirectionary(e.g. named Styles.xaml):
<ResourceDictionary.....>
<Style x:Key="ButtonStyle1" TargetType="Button">
...
</Style>
</ResourceDictionary>
in MainPage.xaml:
<Page.Resources>
<ResourceDictionary>​
<ResourceDictionary.MergedDictionaries>​
<ResourceDictionary Source="Styles.xaml"/>​
</ResourceDictionary.MergedDictionaries>​
​
</ResourceDictionary>​
</Page.Resources>
......
<Button Style="{StaticResource ButtonStyle1}">

App.xaml style not applying to windows

I want all textboxes in my application to have a dark grey background when they are disabled or read only. I have added a style to my App.xaml which I believe should apply the style throughout my app.
App.xaml:
<Application x:Class="XXXX.Deployment.Utils.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:XXXX.Deployment.Utils" >
<Application.Resources>
<local:InvertBoolConverter x:Key="invertBoolConverter" />
<Style TargetType="TextBox" >
<Style.Triggers>
<Trigger Property="IsReadOnly" Value="True">
<Setter Property="Background" Value="DarkGray" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="DarkGray" />
</Trigger>
</Style.Triggers>
</Style>
</Application.Resources>
The style is applying in the design window but not when I actually run the application. I created a window with just a single textbox and set the IsEnabled property to False so I am not sure why this style would not be applied.
TestWindow.xaml:
<Window x:Class="XXXX.Deployment.Utils.TestWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:XXXX.Deployment.Utils"
mc:Ignorable="d"
Height="200" Width="800">
<StackPanel>
<TextBox Margin="2" IsEnabled="False" />
</StackPanel>
TestWindow.xaml.cs:
namespace XXXX.Deployment.Utils
{
public partial class TestWindow : Window
{
public TestWindow()
{
InitializeComponent();
}
}
}
I launch the window from within a console application and use
TestWindow t = new TestWindow();
t.ShowDialog();
EDIT
I think this issue may be because the App.xaml build action is not 'ApplicationDefinition'. We have all our UI in a common utility class library so we get the error 'Library project file cannot specify ApplicationDefinition element'. Is it possible for us to have a global style for controls even if our UI is in a class library?

How to style a WPF AutoCompleteBox?

Probably a really simple mistake, I have downloaded the WPF toolkit and placed an AutoCompleteBox on my window. How can I create a style for this control? I have tried to follow msdn but no luck so far...
http://msdn.microsoft.com/en-us/library/dd728668(v=vs.95).aspx
On my window I have:
<Controls:AutoCompleteBox style="{StaticResource acInput}"/>
In my styles I have the following:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:input="clr-namespace:System.Windows.Controls.Input"
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">
<Style x:Key="acInput" TargetType="input:AutoCompleteBox">
<Setter Property="FontFamily" Value="Segoe UI" />
</Style>
</ResourceDictionary>
But I have the error:
The name "AutoCompleteBox" does not exist in the namespace "clrnamespace:System.Windows.Controls.Input".

Add the following namespace reference:
xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit"

Solved it:
Simply changed TargetType to "Controls:AutoCompleteBox"
<Style x:Key="acInput" TargetType="Controls:AutoCompleteBox">
<Setter Property="FontFamily" Value="Segoe UI" />
</Style>

Inversion of inheritance in WPF styles

I've got a UserControl that contains a button:
<Button Content="Button"/>
And a style:
<Style TargetType="Button">
<Setter Property="Background" Value="Blue"/>
</Style>
The parent window (or another UserControl) may set another more general style:
<Style TargetType="Button">
<Setter Property="Background" Value="Red"/>
</Style>
The result is (what is obvious) that parent buttons will have more general style (Red) and my user control will have buttons with more specific style (Blue).
I'm wondering how to invert such behaviour in order to achieve something like setting the default style in my custom user control which could be then overriden in parent control or window if necessary?
The key is, that default style is defined first in custom user control and it is overriden automaticly by its parent. That is way I called it an inversion.
The imaginary example of the solution maight look like the following:
<Style TargetType="Button" StylePriority="Default">
<Setter Property="Background" Value="Blue"/>
</Style>
The StylePriority could indicate that if there is no other style defined for that button, then the default style should be applied to it.

You could use dynamic resources.
A UserControl:
<UserControl x:Class="Example.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Example">
<UserControl.Resources>
<Style TargetType="local:UserControl1">
<Style.Resources>
<Style TargetType="Button" x:Key="UserControl1.DefaultButtonStyle">
<Setter Property="Background" Value="Red"/>
</Style>
</Style.Resources>
</Style>
</UserControl.Resources>
<Button Content="UserControlButton" Style="{DynamicResource UserControl1.DefaultButtonStyle}"/>
</UserControl>
And a Window:
<Window x:Class="Example.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Example">
<Window.Resources>
<Style TargetType="Button">
<Setter Property="Background" Value="Blue" />
</Style>
</Window.Resources>
<StackPanel>
<local:UserControl1 >
<local:UserControl1.Resources>
<Style x:Key="UserControl1.DefaultButtonStyle" TargetType="Button"
BasedOn="{StaticResource {x:Type Button}}">
<Setter Property="FontSize" Value="40" />
</Style>
</local:UserControl1.Resources>
</local:UserControl1>
<Button Content="WindowButton" />
</StackPanel>
</Window>
If you remove the style for the control in the window, the default user control button style will be applied.

Create a dependency property in your UserControl for the buttons colour, and then bind to it. You can specify a default value of blue for that property.
public static readonly DependencyProperty ButtonColorProperty =
DependencyProperty.Register("ButtonColor", typeof(Color), typeof(MyUserControl),
new PropertyMetadata(Colors.Blue));
public Color State
{
get { return (Color)this.GetValue(ButtonColorProperty); }
set { this.SetValue(ButtonColorProperty, value); }
}
<UserControl ...
x:Name="root">
<Button Content="Button" Background="{Binding ElementName=root, Path=ButtonColor}" />
</UserControl>
Then set that property to red where you want to use the UserControl.
<local:MyUserControl ButtonColor="Red" />

Using usercontrols with static resources from external assembly

It sounds very simple and it's killing me!
I'm trying to use one usercontrol with styles from a ResourceDictionary of an external assembly, but I get an exception at runtime.
Here is how to reproduce:
Create a silverlight class library called MyControls.dll
Create an usercontrol called SuperControl:
<UserControl.Resources>
<ResourceDictionary Source="MyControls;component/Styles.xaml" x:Key="Styles" />
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<TextBlock Style="{StaticResource MyStyle}" Text="Hello"/>
</Grid>
Create a Styles.xaml ResourceDictionary and add:
<Style x:Key="MyStyle" TargetType="TextBlock">
<Setter Property="FontSize" Value="15"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="Margin" Value="0,15,0,4"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
</Style>
Create a Silverlight Application Called SL and add Mycontrols as reference
In MainPage.xaml Grid, add:
<MyControls:SuperControl />
It will compile, but running the application you get "Failed to assign to property 'System.Windows.ResourceDictionary.Source'. [Line: 10 Position: 36]"
I added this to the application's App.xaml
<ResourceDictionary Source="/MyControls;component/Styles.xaml" />
Same error... :(
Any thoughts?

Step 2.
You forgot /.
Source="MyControls;component/Styles.xaml"
Write
Source="/MyControls;component/Styles.xaml"