How to separate xaml markup into different file in uwp? - c#

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}">

Related

UserControl not showing after applying style

I'm in the making of a usercontrol library. Therefore I don't have app.xaml file nor mainwindow.xaml.
I imported (copied) a slider style from another WPF project. This resource dictionary is set to page and was working fine before but, as soon as I apply it to my slider then the control is not showing in VisualStudio as well as runtime. No errors are thrown.
<UserControl x:Class="WPF.UserControls.CustomSlider"
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:WPF.UserControls"
x:Name="CustomSliderControl"
mc:Ignorable="d"
d:DesignHeight="407" d:DesignWidth="127">
<UserControl.Resources>
<ResourceDictionary Source="/WPFUserControls;component/Styles/BaseSliderStyle.xaml"/>
</UserControl.Resources>
<Grid>
<Slider x:Name="Hello" Style="{DynamicResource BaseSliderStyle}" Value="{Binding Value, Mode=TwoWay,
RelativeSource={RelativeSource AncestorType={x:Type local:CustomSlider}}}" Minimum="0.0" Maximum="1.0"/>
</Grid>
And here is part of the slider style :
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WPF.UserControls">
<Style x:Key="BaseSliderStyle" TargetType="{x:Type Slider}">
<Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Foreground" Value="{StaticResource SliderThumb.Static.Foreground}"/>
<Setter Property="Template" Value="{StaticResource SliderHorizontal}"/>
<Style.Triggers>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="Template" Value="{StaticResource SliderVertical}"/>
</Trigger>
</Style.Triggers>
</Style>
I may have miss something. Any hint ?
Thanks.
Make sure that you have added a reference to WPFUserControls.dll and try this:
<UserControl ...>
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/WPFUserControls;component/Styles/BaseSliderStyle.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Grid>
<Slider x:Name="Hello" Style="{StaticResource BaseSliderStyle}" Value="{Binding Value, Mode=TwoWay,
RelativeSource={RelativeSource AncestorType={x:Type local:CustomSlider}}}" Minimum="0.0" Maximum="1.0"/>
</Grid>
</UserControl>
Since I am using the StaticResource markup extension you should get an exception if the "BaseSliderStyle" cannot be found. You can switch back to using DynamicResource when you have confirmed that the style is found and is being applied as expected.
Also note that I am using a merged ResourceDictionary and a pack URI to specify the source: https://msdn.microsoft.com/en-us/library/aa970069(v=vs.110).aspx.
Please also make sure that that the resource dictionary is actually called "BaseSliderStyle.xaml" and that is located under a folder called "Styles" at the root of the project/assembly called "WPFUserControls".

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>

Why can't I get the custom font from the resources?

I have a library where contains a ThemeResources file, where contain styles.
In Fonts folder, I have a font file BuxtonSketch.ttf. Build Action is as RESOURCE
In ThemeResources, I've defined the font:
<FontFamily x:Key="FontFamily-Sketch">pack://application:,,,/Resources/Fonts/#Buxton Sketch</FontFamily>
<Style x:Key="TextNormalStyle" TargetType="TextBlock">
<Setter Property="FontFamily" Value="{StaticResource FontFamily-Sketch}" />
</Style>
And since my UserControl called ProblemUserControl, I invoked but is not working
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Resources/ThemeResources.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Grid>
<TextBlock Text="La pelicula PROMETHEUS!" Style="{StaticResource TextNormalStyle}" />
</Grid>
What could be happening?
This blog and this blog both use the following syntax to use a custom font
Blog 1:
<TextBlock Text="SOTC Custom Fonts!" FontFamily="VINERITC.TTF#Viner Hand ITC"/>
blog2:
<TextBlock Text="Gothic" FontFamily="./GOTHIC.TTF#Century Gothic"/>
So for you I would think it would be
<TextBlock Text="Buxton" FontFamily="BuxtonSketch.TTF#Buxton Sketch"/>
Or for your style
<Style x:Key="TextNormalStyle" TargetType="TextBlock">
<Setter Property="FontFamily" Value="BuxtonSketch.TTF#Buxton Sketch" />
</Style>
You may need to include the folder location, but not sure
<TextBlock Text="Buxton" FontFamily="Resources/Fonts/BuxtonSketch.TTF#Buxton Sketch"/>
Also you can add the fonts to .zip file and access like this:
<Setter Property="FontFamily" Value="../Resources/Fonts/Fonts.zip#BuxtonSketch"/>
I just spent a whole day researching this problem. When copying the fonts into the project, make sure Visual Studio set the Build Action of these items to Resource. All I had to do was change this in the dropdown.

How to have multiple window resource styles for same element type in WPF

I have an element in my window, as below:
<Grid>
<DockPanel LastChildFill="True">
<Label Name="StatisticsLabel" DockPanel.Dock="Bottom"></Label>
<RichTextBox Style="{StaticResource FocusMode}" Name="RichTextBox1" />
</DockPanel>
</Grid>
I would like to swith between two styles at runtime depending of the state I need the control to be in.
I had assumed I could use the following code:
<Window.Resources>
<Style x:Name="FocusMode" TargetType="RichTextBox">
<Setter Property="VerticalScrollBarVisibility" Value="Disabled"></Setter>
</Style>
<Style x:Name="NormalMode" TargetType="RichTextBox">
<Setter Property="VerticalScrollBarVisibility" Value="Auto"></Setter>
</Style>
</Window.Resources>
Of course this isn't working.
Why does WPF not support multiple styles per element? Seems like a pretty basic requirement?
Otherwise, how do I achieve this?
Sorry figured it out, instead of x:Name use x:Key as below:
<Window.Resources>
<Style x:Key="FocusMode" TargetType="RichTextBox">
<Setter Property="VerticalScrollBarVisibility" Value="Disabled"></Setter>
</Style>
<Style x:Key="NormalMode" TargetType="RichTextBox">
<Setter Property="VerticalScrollBarVisibility" Value="Auto"></Setter>
</Style>
I'd have a look at style triggers. You can probably get a good start on the subject from this post: How to make Style.Triggers trigger a different named style to be applied

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"

Categories

Resources