Here is my problem:
In my application for WP 8.1, I have to make a button with an image, and this image have to change according to the theme used in the device,otherway it will be hidden by the background.
So I've tryed using ThemeResource. But it can't be resolved.
Here is the code:
MainPage.xaml
<Page.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ButtonImage.xaml"/>
</ResourceDictionary.MergedDictionaries>
....
<Button HorizontalAlignment="Left"
VerticalAlignment="Top"
Width="40" Height="40"
MinWidth="0" MinHeight="0"
Padding="0"
BorderThickness="1.5"
Grid.Column="2"
Style="{ThemeResource Button123}"/>
ButtonImage.xaml
<Style x:Key="ButtonImage" TargetType="Button">
...
</Style>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Name="Black" x:Key="Black">
<Style x:Key="ButtonAZ" BasedOn="{StaticResource ButtonImage}" TargetType="Button">
<Setter Property="Content">
<Setter.Value>
<Image Source="Assets/AtoZWhite.png"></Image>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="Button123" BasedOn="{StaticResource ButtonImage}" TargetType="Button">
<Setter Property="Content">
<Setter.Value>
<Image Source="Assets/123White.png"></Image>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
<ResourceDictionary x:Name="White" x:Key="White">
<Style x:Key="ButtonAZ" BasedOn="{StaticResource ButtonImage}" TargetType="Button">
<Setter Property="Content">
<Setter.Value>
<Image Source="Assets/AtoZBlack.png"></Image>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="Button123" BasedOn="{StaticResource ButtonImage}" TargetType="Button">
<Setter Property="Content">
<Setter.Value>
<Image Source="Assets/123Black.png"></Image>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
Can some one tell me why is impossibile to use the themeResources??
What kind of image is it? Is it just a black & white icon in Windows Phone Modern style? If so, you can use it in BitmapIcon and Windows Phone will color it for you. Here's my example with 64x64 image.
<Button>
<BitmapIcon UriSource="Assets/Smile.png"
Width="64"
Height="64"/>
</Button>
This is the image:
But in the app it will look like this:
or this
...depending on your phone settings.
According to MSDN, the appropriate keys to use for you dictionaries are Light and Dark, not Black and White. See the documentation.
Related
So I've been trying to override the default style for a slider, but I feel like the way I've been doing it is not correct. For one, I'd like to be able to highlight the track behind the thumb. How do I do this the correct way?
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style BasedOn="{StaticResource {x:Type Slider}}"
TargetType="Slider"
x:Key="SliderTheme">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Slider">
<Grid>
<Border VerticalAlignment="Center"
HorizontalAlignment="Stretch"
Height="5"
Background="White"/>
<Track x:Name="PART_Track">
<Track.Thumb>
<Thumb x:Name="PART_Thumb">
<Thumb.Template>
<ControlTemplate>
<Border Height="20"
Width="20"
Background="#fff"
CornerRadius="15"/>
</ControlTemplate>
</Thumb.Template>
</Thumb>
</Track.Thumb>
</Track>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
</ResourceDictionary>
You can change the track's color like this.
Get the default style by right-clicking the Slider and select Edit template then Edit a copy....
Change the color for <SolidColorBrush x:Key="SliderThumb.Track.Background" Color="HotPink"/>
I'm trying to override Avalonia's Slider theme. It's working on the Slider as a whole, and the Thumb gets updated too, but for some reason I'm unable to apply custom theme to the RepeatButtons PART_DecreaseButton and PART_IncreaseButton
In this case, the background DOES get set to Green, but the template property isn't being applied. Why?
<Style Selector="local|MediaPlayer Slider.seekBar RepeatButton#PART_DecreaseButton">
<Setter Property="Focusable" Value="False" />
<Setter Property="Background" Value="Green" />
<Setter Property="Template">
<ControlTemplate>
<Grid>
<Rectangle Height="11" /> <!-- Fill="#01FFFFFF" -->
<Border Padding="0" BorderThickness="1,1,0,1" BorderBrush="{DynamicResource MediaPlayerSeekBarBorderBrush}"
Background="{DynamicResource MediaPlayerSeekBarDecreaseBrush}" Height="7"
IsHitTestVisible="False" />
</Grid>
</ControlTemplate>
</Setter>
</Style>
In contrast, the thumb is working
<Style Selector="local|MediaPlayer Slider.seekBar Thumb">
<Setter Property="Template">
<ControlTemplate>
<Border BorderThickness="1" Height="11" Width="9"
Background="{DynamicResource MediaPlayerThumbFillBrush}"
BorderBrush="{DynamicResource MediaPlayerThumbBorderBrush}" />
</ControlTemplate>
</Setter>
</Style>
Default Slider.xaml implementation is here.
EDIT: Here's a simple window to reproduce it.
<Window xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="HanumanInstitute.MediaPlayer.Avalonia.Sample.Window1"
Title="Window1" Width="400" Height="200">
<Window.Styles>
<Style Selector="Slider.seekBar RepeatButton#PART_DecreaseButton">
<Setter Property="Focusable" Value="False" />
<Setter Property="Background" Value="Black" />
<Setter Property="Template">
<ControlTemplate>
<Grid>
<Border Padding="0" BorderThickness="3,3,0,3" BorderBrush="Blue"
Background="Blue" Height="7"
IsHitTestVisible="False" />
</Grid>
</ControlTemplate>
</Setter>
</Style>
<Style Selector="Slider.seekBar Thumb">
<Setter Property="Template">
<ControlTemplate>
<Border Width="10" Height="30" Background="Gray" />
</ControlTemplate>
</Setter>
</Style>
</Window.Styles>
<Slider Classes="seekBar" VerticalAlignment="Center" />
</Window>
I have got the problem with FocusVisualStyle, I need to override TAB keyboard focus style, when i'm override Window.Template all controls styles FocusVisualStyle on the window stops working.
The problem XAML (Tab style doesn't work):
<Window
x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="800"
Height="450">
<Window.Style>
<Style TargetType="Window">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Style>
<Window.Resources>
<Style x:Key="ButtonTabFocused" TargetType="Control">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="-3" StrokeThickness="3" Stroke="Red" SnapsToDevicePixels="true"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid Background="White">
<Button
Width="100"
Height="40"
Content="MyButton"
FocusVisualStyle="{StaticResource ButtonTabFocused}" />
</Grid>
</Window>
Without Window.Style FocusVisualStyle works well (Tab style works):
<Window
x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="800"
Height="450">
<Window.Resources>
<Style x:Key="ButtonTabFocused" TargetType="Control">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="-3" StrokeThickness="3" Stroke="Red" SnapsToDevicePixels="true"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid Background="White">
<Button
Width="100"
Height="40"
Content="MyButton"
FocusVisualStyle="{StaticResource ButtonTabFocused}" />
</Grid>
</Window>
No msdn information founded. Could you please tell me any workarounds or am i missed something what's makes this behavior.
My environments:
.NET Framework 4.7.2 (same for older versions)
Windows 10 19042.685
Visual Studio 2019
Thanks.
UPDATE, working style below, thanks to arxont:
<Style TargetType="Window">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Grid>
<AdornerDecorator>
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</AdornerDecorator>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You need to add AdornerDecorator. Change your window style:
<AdornerDecorator>
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</AdornerDecorator>
I have the following checkbox
<CheckBox x:Name="checkBox" Content="CheckBox" Width="74"/>
and I have a button
<Button Name="TestButton" Content="Test" />
I want to set a "default" color for the textblock. I achieve that by having a resourcedictionary which has the following content:
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Foreground" Value="White"/>
</Style>
The problem is, that the Button should still have a black Textblock foreground, but although in another sourcedictionary i have the following, it still changes to white:
<Style TargetType="Button">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border BorderThickness="1,0,0,1" CornerRadius="5" Background="{TemplateBinding Background}">
<ContentPresenter
x:Name="ContentPresenter"
Margin="1"
VerticalAlignment="Center"
HorizontalAlignment="Center"
TextBlock.Foreground="Black"
Opacity="1.0"/>
</Border>
</ControlTemplate/>
<Setter.Value/>
</Setter>
</Style.Setters>
</Style
Edit:
The ResourceDictionaries are defined in Application.xaml like this:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="TextBlock.xaml"/>
<ResourceDictionary Source="Buttons.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
You could try overriding the default TextBlock style locally for the ContentPresenter by defining another one in its Resources:
<ContentPresenter ... >
<ContentPresenter.Resources>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="Black" />
</Style>
</ContentPresenter.Resources>
</ContentPresenter>
But a better way to set a default control text color is like this in App.Resources. TextElement.Foreground will override this on any given individual element.
<SolidColorBrush
x:Key="{x:Static SystemColors.ControlTextBrushKey}"
Color="White"
/>
If you use that and discard your default TextBlock style, your original ContentPresenter should work as you had it.
I've created a custom style for the context menu. But I have to put 3 lines of code under each widget(Textbox):
<TextBox.ContextMenu>
<ContextMenu/>
</TextBox.ContextMenu>
Why do I have to do that ? My tooltip style works without any extra code.
My context menu code:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Color x:Key="BackgroundColor" A="255" R="19" G="19" B="19"/>
<BitmapImage x:Key="BiCut" UriSource="Images/cut.tif"/>
<BitmapImage x:Key="BiCopy" UriSource="Images/copy.tif"/>
<BitmapImage x:Key="BiPaste" UriSource="Images/paste.tif"/>
<SolidColorBrush x:Key="BorderBrush" Color="#ECECEC"/>
<Style TargetType="ContextMenu">
<Setter Property="Foreground" Value="{StaticResource BorderBrush}"/>
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Grid.IsSharedSizeScope" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContextMenu">
<Border BorderThickness="1" BorderBrush="#2468d9" Padding="2" Background="#131313">
<StackPanel Orientation="Horizontal">
<StackPanel Orientation="Horizontal" Height="20">
<Image Source="{StaticResource BiCut}" Width="20"/>
<Button Content="Ausschneiden" Margin="5,0,0,0"/>
<TextBlock Text="Strg+X" TextAlignment="Center" VerticalAlignment="Center" Margin="5,0,0,0"/>
</StackPanel>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Controls do not have ContextMenu by default (check property - it is null). So your style will be not applied to any Control.
Tooltip is null by defult, but it will be filled by TooltipService if it is necessary.
There is no service to fill your ContextMenu for all of your element. Use a default style for this (for Control).
You can create a default Style for your TextBox and add that ContextMenu in Style. In this way you will have that ContextMenu for every TextBox you will add in your application and you won't have to add these three lines everywhere.
<Style TargetType="{x:Type TextBox}" >
<Setter Property="ContextMenu">
<Setter.Value>
<ContextMenu />
</Setter.Value>
</Setter>
</Style>