I'm trying to change the style of selecting items in a gridview. Below the code I'm using in StandardStyles.xaml:
<SolidColorBrush x:Key="ListViewItemSelectedBackgroundThemeBrush" Color="Transparent"/>
<SolidColorBrush x:Key="ListViewItemPointerOverBackgroundThemeBrush" Opacity="0.25" Color="Blue"/>
<SolidColorBrush x:Key="ListViewItemSelectedPointerOverBackgroundThemeBrush" Opacity="0.7" Color="Blue"></SolidColorBrush>
<SolidColorBrush x:Key="ListViewItemSelectedPointerOverBorderThemeBrush" Color="Blue"/>
But I need what the border with the selected icon stay with some style and the background transparent, like this:
Selected Image Style
Could someone help me?
When I use a rectangle in StandardStyles.xaml beneath each GridViewItem the custom selection works.
<DataTemplate x:Key="MyTemplete">
<Grid HorizontalAlignment="Left" Background="Transparent">
<Rectangle>
<Rectangle.Fill>
<SolidColorBrush Color="White" Opacity="1"/>
</Rectangle.Fill>
</Rectangle>
...
</Grid>
</DataTemplate>
Use the code below to set the style of a selected item. It will set the border color, the text color and the check icon color.
<SolidColorBrush x:Key="ListViewItemSelectedBackgroundThemeBrush" Color="#323232"></SolidColorBrush>
<SolidColorBrush x:Key="ListViewItemSelectedForegroundThemeBrush" Color="White"></SolidColorBrush>
<SolidColorBrush x:Key="ListViewItemCheckThemeBrush" Color="White"></SolidColorBrush>
Regards.
Related
Problem
Hey guys,
I've got a problem regarding the DefaultTextForegroundThemeBrush in WinUi 3. I read here that I can use the DefaultTextForegroundThemeBrush to override the foreground value for all default text.
However if I override that Brush with my desired color (white) most of the TextBlocks get white (not all though and I do not know why either).
Strangely all TextBoxes will get gray by default and the Text inside will be black. Even though I did override the BackgroundBrush for TextBoxes as well.
For me it seems like a pretty strange behavior I couldn't get behind.
Furthermore only TextBoxes are affected. A PasswordBox I use remains unaffected.
I did not find anything googling for this strange behavior.
Maybe some of you guys can help me. Let me know if you need anything else.
Kind regards!
Code
Overriding TextControl Brushes
<Thickness x:Key="TextControlBorderThemeThickness">1,1,1,1</Thickness>
<SolidColorBrush x:Key="TextControlBackground" Color="{ThemeResource PrussianBlueColor}"/>
<SolidColorBrush x:Key="TextControlBackgroundPointerOver" Color="{ThemeResource VividSkyBlueColor}"/>
<SolidColorBrush x:Key="TextControlBackgroundFocused" Color="{ThemeResource PrussianBlueColor}"/>
<SolidColorBrush x:Key="TextControlForeground" Color="{ThemeResource WhiteColor}"/>
<SolidColorBrush x:Key="TextControlForegroundPointerOver" Color="{ThemeResource WhiteColor}"/>
<SolidColorBrush x:Key="TextControlForegroundFocused" Color="{ThemeResource WhiteColor}"/>
<SolidColorBrush x:Key="TextControlButtonForeground" Color="{ThemeResource WhiteColor}"/>
<SolidColorBrush x:Key="TextControlButtonForegroundPointerOver" Color="{ThemeResource WhiteColor}"/>
<SolidColorBrush x:Key="TextControlButtonForegroundPressed" Color="{ThemeResource LighterBlackColor}"/>
<SolidColorBrush x:Key="TextControlBorderBrush" Color="{ThemeResource VividSkyBlueColor}"/>
<SolidColorBrush x:Key="TextControlBorderBrushPointerOver" Color="{ThemeResource CarolinaBlueColor}"/>
<SolidColorBrush x:Key="TextControlPlaceholderForeground" Color="{ThemeResource LighterBlackColor}"/>
<SolidColorBrush x:Key="TextControlPlaceholderForegroundFocused" Color="{ThemeResource LighterBlackColor}"/>
<SolidColorBrush x:Key="TextControlPlaceholderForegroundPointerOver" Color="{ThemeResource LighterBlackColor}"/>
Overriding DefaultTextForegroundThemeBrush
<SolidColorBrush x:Key="DefaultTextForegroundThemeBrush" Color="{ThemeResource WhiteColor}"/>
Screenshots
TextBox without DefaultTextForegroundThemeBrush set
TextBox with DefaultTextForegroundThemeBrush set
I want to set customg background to tabPage, but it works only when its not active.
<TabItem Header="Камера" VerticalAlignment="Center" Width="170" Height="40" BorderBrush="{x:Null}" >
<TabItem.Background>
<ImageBrush ImageSource="res/tap.png"/>
</TabItem.Background>
</TabItem>
This works only when tab is not active
https://ibb.co/hD28jVB
How to change brush of tabItem while it's active or on hover?
You need to define a custom ControlTemplate for the TabItem since the default one sets the Background property to some static SolidColorBrushes:
<SolidColorBrush x:Key="TabItem.MouseOver.Border" Color="#7EB4EA"/>
<SolidColorBrush x:Key="TabItem.Disabled.Background" Color="#F0F0F0"/>
<SolidColorBrush x:Key="TabItem.Disabled.Border" Color="#D9D9D9"/>
<SolidColorBrush x:Key="TabItem.Selected.Border" Color="#ACACAC"/>
<SolidColorBrush x:Key="TabItem.Selected.Background" Color="#FFFFFF"/>
Right-click on a TabItem in design mode in Visual Studio or in Blend and choose Edit Template->Edit a Copy to get a copy the default template and then edit it as per your requirements. Look for the setters that sets the Background property, e.g.:
<Setter Property="Background" TargetName="mainBorder" Value="{StaticResource TabItem.MouseOver.Background}"/>
I want to create a Slider that has a Gradient from Black to a certain Color as a Background.
The color is to be set additionally to the Style of the Slider. AFAIK, no extra properties can be added to a given control using just Control Templates (i.e. no attached properties and no derived controls).
I therefore want to use the Tag property and have created this snippet:
<Style x:Key="ColorSlider" TargetType="{x:Type Slider}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Slider}">
<Grid>
<Rectangle Grid.Column="1" Grid.Row="1">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<GradientStop Color="{TemplateBinding Tag}" Offset="0.0"/>
<GradientStop Color="Black" Offset="1.0"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
....
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and use it like this:
<Slider Style="{StaticResource ColorSlider}" Width="100" Height="500" Tag="{StaticResource redColor}"/>
with redColor beeing a static resource (although I'd prefer typing colors directly using HEX codes or predefined colors).
This however doesn't work, any idea why?
Instead of using TemplateBinding which gets resolved at compile time, use RelativeSource with Mode set to TemplatedParent which gets resolved at run time.
TemplateBinding gets resolved at compile time but actual value for tag will be resolved at runtime when staticResource gets applied. That's why you should use another approach.
<GradientStop Color="{Binding Tag, RelativeSource={RelativeSource
Mode=TemplatedParent}}" Offset="0.0"/>
I'm sorry if this is very obvious, but it's been years since I used C#, and I can't seem to find the correct google search term for this.
I am trying to create a button template in XAML that will be used in a, for example, 2x2 grid. This button has to be added in code, because the user should be able to define how many buttons he wants during runtime. The button is supposed to contain another button and a label.
<Window x:Class="Soundboard.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="750" Width="1200">
<Window.Resources>
<ControlTemplate x:Key="myButton" TargetType="Button">
<Canvas x:Name="mainCanvas">
<Button x:Name="childButton" Height="30" Width="30" HorizontalAlignment="Right" VerticalAlignment="Top">
<Button.Background>
<ImageBrush ImageSource="Resources/picture.png"/>
</Button.Background>
</Button>
<Label x:Name="nameLabel" Content="Label" HorizontalAlignment="Center" VerticalAlignment="Bottom"></Label>
</Canvas>
</ControlTemplate>
</Window.Resources>
<Grid x:Name="myGrid">
</Grid>
I can call the button fine by adding this line in XAML myGrid (to test)
<Button Template="{StaticResource myButton}" Height="200" Width="200" Margin="300,0,0,0"></Button>
<Button Template="{StaticResource smyButton}" Height="200" Width="200" Margin="0,0,0,0"></Button>
But I don't seem to be able to find a way to add that button in code. This is one of my tries that will not work:
Button b = (Button)FindResource("myButton");
b.SetValue(Grid.RowProperty, r); // r is int from row for loop
b.SetValue(Grid.ColumnProperty, c); // c is int from column for loop
myGrid.Children.Add(b);
But b will always be null. Can someone help me? I am guessing I am using some wrong method in the XAML, but I really have no idea at the moment.
myButton is a ControlTemplate instead of a Button as currently being accessed in the code, so you may modify the code as follows
Button b = new Button();
b.Template = (ControlTemplate)FindResource("myButton");
so in above example you retrieve the ControlTemplate via FindResource method and apply it to a newly created button.
rest remains the same
Like this line and it has been used on app.xaml files :
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<SolidColorBrush x:Key="ListBoxItemDisabledForegroundThemeBrush" Color="Transparent" />
<SolidColorBrush x:Key="ListBoxItemPointerOverBackgroundThemeBrush" Color="Transparent" />
<SolidColorBrush x:Key="ListBoxItemPointerOverForegroundThemeBrush" Color="#f7f6f6" />
<SolidColorBrush x:Key="ListBoxItemPressedBackgroundThemeBrush" Color="Transparent" />
<SolidColorBrush x:Key="ListBoxItemPressedForegroundThemeBrush" Color="#f7f6f6" />
<SolidColorBrush x:Key="ListBoxItemSelectedBackgroundThemeBrush" Color="Transparent" />
<SolidColorBrush x:Key="ListBoxItemSelectedDisabledBackgroundThemeBrush" Color="#66FFFFFF" />
<SolidColorBrush x:Key="ListBoxItemSelectedDisabledForegroundThemeBrush" Color="#99000000" />
<SolidColorBrush x:Key="ListBoxItemSelectedForegroundThemeBrush" Color="#f7f6f6" />
<SolidColorBrush x:Key="ListBoxItemSelectedPointerOverBackgroundThemeBrush" Color="Transparent" />
<SolidColorBrush x:Key="ListBoxBackgroundThemeBrush" Color="Transparent" />
<SolidColorBrush x:Key="ListBoxBorderThemeBrush" Color="Transparent" />
<SolidColorBrush x:Key="ListBoxDisabledForegroundThemeBrush" Color="#66FFFFFF" />
<SolidColorBrush x:Key="ListBoxFocusBackgroundThemeBrush" Color="#f7f6f6" />
<SolidColorBrush x:Key="ListBoxForegroundThemeBrush" Color="#f7f6f6" />
</ResourceDictionary>
How can I change style of sample MediaElement:
For example how can I change the background.
Code:
<MediaElement AudioCategory="BackgroundCapableMedia" x:Name="media" MediaEnded="Media_MediaEnded" AutoPlay="True" AreTransportControlsEnabled="True" IsMuted="False" Volume="0.5"/>
Actually you can change the colors by overriding the default colors in the App. Note this would apply now for all MediaElement controls with transport controls, but it is possible. In your App.xaml you would provide overrides for these values like this:
<Application.Resources>
<SolidColorBrush x:Key="MediaButtonForegroundThemeBrush" Color="Blue" />
<SolidColorBrush x:Key="MediaButtonBackgroundThemeBrush" Color="Transparent" />
<SolidColorBrush x:Key="MediaButtonPointerOverForegroundThemeBrush" Color="#FFFFFFFF" />
<SolidColorBrush x:Key="MediaButtonPointerOverBackgroundThemeBrush" Color="#26FFFFFF" />
<SolidColorBrush x:Key="MediaButtonPressedForegroundThemeBrush" Color="#FF000000" />
<SolidColorBrush x:Key="MediaButtonPressedBackgroundThemeBrush" Color="#FFFFFFFF" />
<SolidColorBrush x:Key="MediaButtonPressedBorderThemeBrush" Color="#FFFFFFFF" />
<SolidColorBrush x:Key="MediaControlPanelVideoThemeBrush" Color="Red" />
<SolidColorBrush x:Key="MediaControlPanelAudioThemeBrush" Color="#FF000000" />
<SolidColorBrush x:Key="MediaDownloadProgressIndicatorThemeBrush" Color="#38FFFFFF" />
<SolidColorBrush x:Key="MediaErrorBackgroundThemeBrush" Color="#FF000000" />
<SolidColorBrush x:Key="MediaTextThemeBrush" Color="#FFFFFFFF" />
</Application.Resources>
This would give you a visual like this:
Hope this helps!
I think if you do not want to write your own controlpanel with play-pause-stop controls, you can not change the background of this MediaElement rendered controlpanel because it is an overlay of the video and is designed to look MS/Windows8 conform.
Note: This controlpanel is also invisible if you do not mouse-over the video.