Ok, so I know a little bit about GUI development, and am new to Windows 8 (Modern UI)
I'd also like to do this with C# (no XAML) if possible.
Style
What I'm trying to do here is create a style I can apply to a button created somewhere else.
public static Style firstButtonStyle()
{
firstButton = new Style(typeof(Button));
ControlTemplate btnControl = new ControlTemplate();
//firstButton.Setters.Add(new Setter(Button.TemplateProperty, btnControl));
firstButton.Setters.Add(new Setter(Button.BackgroundProperty, new SolidColorBrush(Windows.UI.Colors.Blue)));
firstButton.Setters.Add(new Setter(Button.IsPointerOverProperty, new SolidColorBrush(Windows.UI.Colors.PaleGreen)));
firstButton.Setters.Add(new Setter(Button.IsPressedProperty, Windows.UI.Colors.Beige));
firstButton.Setters.Add(new Setter(Button.ForegroundProperty, Windows.UI.Colors.Red));
return firstButton;
}
Application
This is where the button is created and the style applied.
private Button enterButtonCreation(string text)
{
Button enterButton = new Button();
enterButton.Content = text;
enterButton.Margin = new Thickness(200, 80, 20, 0);
Style firstButtonStyl = WikierStyle.firstButtonStyle();
enterButton.Style = firstButtonStyl;
enterButton.Background = new SolidColorBrush(Windows.UI.Colors.Silver);
return enterButton;
}
I can change the background silver using .Background, but when using .BackgroundProperty nothing seems to happen.
first of i suggest you that you should try to do all of your style work in your xaml file like try to declare custum styles in your xaml page. if you want to use the custumstyle in particularpage only then define it your page only like this. and you can apply this style on any button.
<Page
x:Class="Appgridcheck.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Appgridcheck"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<Style TargetType="Button" x:Name="CustomStyle" >
<Setter Property="Background" Value="White" />
</Style>
</Page.Resources>
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Button Style="{StaticResource CustomStyle}" />
</Grid>
secondly if you want to define global custumStyle that you can use throughout your app(mean on all pages ) then define this style in app.xaml like this.
<Application
x:Class="Appgridcheck.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Appgridcheck">
<Application.Resources>
<ResourceDictionary>
<Style TargetType="Button" x:Name="gllobalCustomstyle" >
<Setter Property="Background" Value="Black" />
</Style>
<ResourceDictionary.MergedDictionaries>
<!--
Styles that define common aspects of the platform look and feel
Required by Visual Studio project and item templates
-->
<ResourceDictionary Source="Common/StandardStyles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
now you use this tyle on any page..hope this will help..
Related
So, I have this issue with making a custom treeview with custom treeviewitem:s where the ItemContainerStyle gets cleared by loading the style from the custom style.
It work like this. I have custom MyTreeViewItem based on TreeViewItem.
<TreeViewItem x:Class="UI.MyTreeViewItem"
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"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<TreeViewItem.Resources>
<Style x:Key="MyTreeViewItemStyle" TargetType="TreeViewItem">
<Setter Property="Background" Value="#AEFFC1" />
</Style>
</TreeViewItem.Resources>
</TreeViewItem>
As you can see I have just have a simple coloring here just to make sure that the styling it self works. This how ever wont load unless I do like this in code behind.
EDIT: I know things like coloring don't need to be put here as there was intended to be a template here instead. How ever since noting really worked, I just stripped this down to the bones to make sure I put something super simple in that I know should work in case it was becaouse of the template it self.
public partial class MyTreeViewItem : TreeViewItem
{
public MyTreeViewItem()
{
InitializeComponent();
this.Loaded += MyTreeViewItem_Loaded;
}
private void MyTreeViewItem_Loaded(object sender, RoutedEventArgs e)
{
this.Style = Resources["MyTreeViewItemStyle"] as Style;
}
}
This works grate. Have used this several other times with other controls to have custom styling for controls needed to be loaded up with out having to bother to "restyle" everything over and over again.
How ever there are a issue I come across with this. And that is when ItemContainerStyle is being used of this kind of custom styled controller.
<local:BaseTreeView x:Class="My.Navigator.NavigatorTreeView"
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:ui="clr-namespace:UI;assembly=BaseCode"
d:DesignHeight="450" d:DesignWidth="800">
<ui:MyTreeView ItemsSource="{Binding Path=Nodes}">
...
<ui:MyTreeView.ItemContainerStyle>
<Style TargetType="{x:Type ui:MyTreeViewItem}">
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}"/>
<Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
<EventSetter Event="Selected" Handler="TreeView_SelectedItemChanged" />
<EventSetter Event="Expanded" Handler="TreeView_NodeExpanded" />
<EventSetter Event="Collapsed" Handler="TreeView_NodeCollapsed" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
</Style.Triggers>
</Style>
</ui:MyTreeView.ItemContainerStyle>
</ui:MyTreeView>
</local:BaseTreeView>
This ui:MyTreeView.ItemContainerStyle as you see above gets totally ignored once the style is loaded, by this.Style = Resources["MyTreeViewItemStyle"] as Style; in the MyTreeViewItem_Loaded.
That means these Setters, EventSetters and Triggers will not fire at all, as they still are needed to be able to be added as as additional rules.
How can this be solved, so that the predefined styling in the custom control can be loaded and by using this control, you can still can hook up unique rules, like above with out having the the predefined overrule them?
It's not really clear why you are doing what you are doing. All I can say is that you are overwriting the Style value by assigning it explicitly after the control was initialized with the value from the TreeView.ItemContainerStyle.
Normally, on a UserControl, you would set the properties locally on the element:
<TreeViewItem x:Class="UI.MyTreeViewItem"
...
d:DesignHeight="450" d:DesignWidth="800"
Background="#AEFFC1">
</TreeViewItem>
or in code-behind:
private void MyTreeViewItem_Loaded(object sender, RoutedEventArgs e)
{
this.Background =
new SolidColorBrush(ColorConverter.ConvertFromString("#AEFFC1"));
}
When writing a custom Control, you would provide a default Style in Generic.xaml. This is the best solution as it allows the control to be styled (where custom styles are allowed to override default values provided by the default Style). External styles are merged implicitly. You should prefer a custom Control over a UserControl.
Your current code does not allow styling as you forcefully override values provided by a custom Style:
// Overwrite previous property value.
this.Style = someValue;
This is programming 101, first grade: an assignment always overwrites the old value (reference) of the variable.
Assumming that you are knowing what you are doing and you don't want to use one of the above solution, you must manually merge both styles using the Style.BasedOn property:
private void MyTreeViewItem_Loaded(object sender, RoutedEventArgs e)
{
var defaultStyle = Resources["MyTreeViewItemStyle"] as Style;
defaultStyle.BasedOn = this.ItemContainerStyle;
this.Style = defaultStyle;
}
See: Control authoring overview: Models for Control Authoring
Since i have not seen something helpful after searching for a while, i decided to ask here:
I have a small testing Project, just to import a custom Icon Font from the interwebs.
Current Proedure is the following:
my MainApp.xaml consists of a single Textblock, which is referencing a Style-element in Styles.xaml, which in turn references a FontFamily where i load the ttf file per platform.
In WASM it works great (base64 URI), but in UWP i just cant get the font-icon to display at all.
The Style.xaml gets imported perfectly by the App.xaml, the Size gets applied, but it seems there is something wrong with the FontFamily-Tags.
I tried:
Installing my font by hand => Worked like a charm. So its probably not the font file?
https://platform.uno/docs/articles/features/custom-fonts.html , but it didn't help.
https://blog.mzikmund.com/2020/01/custom-fonts-in-uno-platform/ which in turn, didn't change much.
https://github.com/MartinZikmund/blog-2020/tree/master/Uno.CustomFonts even after cross-referencing here, i couldn't get it to work.
https://github.com/unoplatform/calculator/blob/uno/src/Calculator.Shared/Styles.xaml i also cross-checked with the official calculator-port, but even after setting things up like they did, nothing changed.
Reinstall VS (i use the Community Version).
Here's my Code:
MainApp.xaml:
<Page
x:Class="Testing.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Testing"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<TextBlock Text="L" Style="{ThemeResource IconTextStyle}" />
</Grid>
</Page>
Styles.xaml:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:xamarin="http://uno.ui/xamarin"
xmlns:macos="http://uno.ui/macos"
xmlns:wasm="http://uno.ui/wasm"
xmlns:skia="http://uno.ui/skia"
xmlns:win="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"
mc:Ignorable="xamarin wasm macos skia"
>
<win:FontFamily x:Key="IconScratchedFontFamily">ms-appx:///Assets/PWSmallIcons.ttf#Small-Icons-Scratched</win:FontFamily>
<macos:FontFamily x:Key="IconScratchedFontFamily">ms-appx:///Assets/PWSmallIcons.ttf#Small-Icons-Scratched</macos:FontFamily>
<wasm:FontFamily x:Key="IconScratchedFontFamily">Small-Icons-Scratched</wasm:FontFamily>
<skia:FontFamily x:Key="IconScratchedFontFamily">ms-appx:///Assets/PWSmallIcons.ttf#Small-Icons-Scratched</skia:FontFamily>
<win:FontFamily x:Key="IconClearFontFamily">ms-appx:///Assets/PWSmallIconsFree.ttf#Small-Icons-Free</win:FontFamily>
<macos:FontFamily x:Key="IconClearFontFamily">ms-appx:///Assets/PWSmallIconsFree.ttf#Small-Icons-Free</macos:FontFamily>
<wasm:FontFamily x:Key="IconClearFontFamily">Small-Icons-Free</wasm:FontFamily>
<skia:FontFamily x:Key="IconClearFontFamily">ms-appx:///Assets/PWSmallIconsFree.ttf#Small-Icons-Free</skia:FontFamily>
<Style TargetType="TextBlock" x:Key="IconTextStyle">
<Setter Property="FontFamily"
Value="{StaticResource IconScratchedFontFamily}" />
<Setter Property="FontWeight"
Value="Normal" />
<Setter Property="FontSize"
Value="116" />
</Style>
</ResourceDictionary>
App.xaml:
<Application
x:Class="Testing.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Testing">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ms-appx:///Styles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
Found the solution:
<win:FontFamily x:Key="IconScratchedFontFamily">ms-appx:///Assets/PWSmallIcons.ttf#PWSmallIcons</win:FontFamily>
<macos:FontFamily x:Key="IconScratchedFontFamily">ms-appx:///Assets/PWSmallIcons.ttf#PWSmallIcons</macos:FontFamily>
Background: The part after the # indicates the name of the font, as it is written in the .ttf File, not name of the Font as I want to reference it, which is pretty obvious if you think about it.
It was nearly impossible to figure out with my provided code, so I decided to update my question for anyone else running into this problem.
For Win and macOS the way to define the FontFamily in the Resources is by using just the FontName that in your case it would be something like:
<win:FontFamily x:Key="IconScratchedFontFamily">Small-Icons-Scratched</win:FontFamily>
<macos:FontFamily x:Key="IconScratchedFontFamily">Small-Icons-Scratched</macos:FontFamily>
and
<win:FontFamily x:Key="IconClearFontFamily">Small-Icons-Free</win:FontFamily>
<macos:FontFamily x:Key="IconClearFontFamily">Small-Icons-Free</macos:FontFamily>
With this, you should be able to use your FontFamily definitions in any of your Styles.
Hope this helps.-
I have designed a whole app in xamarinforms, I want to add left and right padding to 10 points on all buttons in the app, is there a way to do it using App.xaml or any other way where I change the padding of the button for iOS platform only ?
Check these two ms docs:
global style (you can still override the margin/padding on specific pages)
XAML markup for platform
And this is a sample for your App.xaml:
<Application.Resources>
<ResourceDictionary>
<Style ApplyToDerivedTypes="True" TargetType="Button">
<Setter Property="Margin" Value="{x:OnPlatform iOS='10,0', Android='0'}" />
</Style>
</ResourceDictionary>
</Application.Resources>
I would like to have a static list of Styles in Xaml
So far I have tried:
<local:Styles xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MyApp.Core;assembly=MyApp.Core">
<Style x:Key="labelStyle" TargetType="Label">
<Setter Property="TextColor" Value="Green" />
</Style>
</local:Styles>
Code Behind
public partial class Styles : List<Style>
{
public Styles()
{
}
}
but when I do
var styles = new Styles();
The class is empty.
As an aside I can't use Application Resources or ResourceDictionary
You can place your styles in a ResourceDictionary (Add -> New Item -> Resource Dictionary):
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Your styles here -->
<Style ...
</ResourceDictionary>
Don't forget that you will need to add a reference to it in App.xaml:
<Application x:Class="Your.App.Namespace"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/Your.App.Namespace;component/Path/To/Dictionary.xaml"/>
...
To get hold of these styles in code-behind, you can use the FindResource method:
Style myStyle = App.Current.FindResource("MyStyleKey") as Style;
One additional Idea that comes to mind
Create a standard Xamarin.Forms.Solution
Mark up the Application XAML with your Styles
Instantiate it and Serialize the Application.Resource to XML
Go back to your MVVMCross app and deserialize it on load and assign it to each page at construction or Application.Current.Resources. Once you have the format for the XML you'd be able to edit it directly and it would be portable from project to project basically a css style sheet(in xml format) for Xamarin Forms might be fun.
Below is the Code , in which i want to change the theme color of the MahApps.Metro pakage.
it can be changed by changing the ResourceDictionary Source pack of MahApps.
[/MahApps.Metro;component/Styles/Accents/Blue.xaml ]
say example its /Blue.xaml now ... we can change colors of the window. to /Red.xaml , /Yellow.xaml etc
So how can i change the color of the window asynchronously in every 5 seconds? is this possible in wpf ?
i am new to wpf and clueless.
<controls:MetroWindow x:Class="NginX.Choose"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
Title="NginX" Height="350" Width="350" ShowMaxRestoreButton="False">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid>
</Grid>
</controls:MetroWindow>
You can replace the Application's resource dictionary by doing:
Application.Current.Resources.Clear()
Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary()
{
Source = new Uri("pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml")
});
Put this in a timer and cycle through Red.xaml, Blue.xaml etc