The application I'm working on has a surfacelistbox whose scrollbar I'm trying to style, but for some reason nothing I'm doing is affecting it.
The style:
<Style TargetType="s:SurfaceScrollBar">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="s:SurfaceScrollBar">
<Grid x:Name="Root">
<Track Margin="2,6,6,6"
Name="PART_Track"
Grid.Row="1"
IsDirectionReversed="true">
<Track.DecreaseRepeatButton>
<s:SurfaceRepeatButton Command="ScrollBar.PageUpCommand" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<s:SurfaceThumb Width="10"/>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<s:SurfaceRepeatButton Command="ScrollBar.PageDownCommand" />
</Track.IncreaseRepeatButton>
</Track>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="s:SurfaceRepeatButton">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="s:SurfaceRepeatButton">
<Border Background="Transparent"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type s:SurfaceThumb}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="s:SurfaceThumb">
<Border CornerRadius="5"
Background="DimGray"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I've tried putting this style in app.xaml, in the window's resources, and in the resources of the listbox itself (<s:SurfaceListBox.Resources>), but nothing has any visual effect. However, if I change it to a regular listbox and change the style accordingly (surfaceScrollBar to ScrollBar, etc.), the style is applied fine no matter where I put it, but this breaks touch scrolling.
Am I doing something wrong with the style itself?
Related
I wonder if there is a way to do it for all the future buttons and other controls or do i need to make a solution for each control/button ? And how to do it ?
I want to disable the mouse hove highlight.
<Button x:Name="btnTest" Content="Start Watching" HorizontalAlignment="Left" Margin="14,241,0,0" VerticalAlignment="Top" Width="109" RenderTransformOrigin="0.484,-0.066" Height="30" FontSize="16" Background="#FFFB0000" Click="btnTest_Click"/>
<TextBox HorizontalAlignment="Left" Height="30" Margin="14,175,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="644"/>
<Button Content="Browse" Margin="673,175,18,0" VerticalAlignment="Top" RenderTransformOrigin="-0.111,0.769" Height="30" FontSize="16"/>
Add it to your ResourceDictionary:
<Style TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border"
BorderThickness="1"
Padding="4,2"
BorderBrush="DarkGray"
CornerRadius="3"
Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="Black" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And since Style has no key it will be on all the buttons
You'll need to create a style. if you want it to be applied through your whole app, you'll need to put it into your "app.xaml" file (within an application.Resources).
Bellow is an example of how to do it. I added some stuff like setters to illustrate that you can add properties, you could also add triggers and many things.
Not setting a "x:key" to your style will make them the default one (thus overriding the basic one), as the one below, if you wish to have a collection of styles, give them keys.
`<Style TargetType="{x:Type Button}">
<Setter Property="Background"
Value="Transparent" />
<Setter Property="BorderThickness"
Value="0" />
<Setter Property="Cursor"
Value="Hand" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center">
</ContentPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>`
I am trying to change the style of the tooltip of DataGridTextColumn, But the xaml code below doesn't work. When I run the application, custom tooltip is shown and System.Windows.Style is written in it. The button isn't shown too. Where do I have mistake?
<DataGrid.Columns>
<DataGridTextColumn Width="*" Binding="{Binding W_NAME}" Header="Name">
<DataGridTextColumn.CellStyle>
<Style TargetType="DataGridCell">
<Setter Property="ToolTip">
<Setter.Value>
<Style TargetType="ToolTip">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="HasDropShadow" Value="True"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Content" Value="mytext"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToolTip">
<Border Name="RootElement" CornerRadius="2,2,0,0">
<Border.Background>
<SolidColorBrush x:Name="BorderBrush" Color="Black"/>
</Border.Background>
<Grid Margin="4" Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
TextElement.FontFamily="{DynamicResource Glaho}"
Content="{TemplateBinding Content}"
Margin="4,5,4,4">
</ContentPresenter>
<Button Content="This is button" HorizontalAlignment="Right" Command="{Binding somecommand}"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Style>
</DataGridTextColumn.CellStyle>
</DataGridTextColumn>
You're very close, the problem is you've set the Style as the ToolTip itself:
<Style TargetType="DataGridCell">
<Setter Property="ToolTip">
<Setter.Value>
<Style TargetType="ToolTip"> <-------------- badness!
What you need to do is set a ToolTip control as the ToolTip, and then set the Style on that:
<Style TargetType="DataGridCell">
<Setter Property="ToolTip">
<Setter.Value>
<ToolTip>
<ToolTip.Style>
<Style TargetType="ToolTip">
I'm using Modern UI, and I have a ListView containing a Gridview. When I hover over or select a row, there is a background color applied to the row. How can I remove this style?
<ListView ... >
<ListView.Resources>
<SolidColorBrush x:Key="ItemBackgroundHover" Color="Transparent" />
<Style TargetType="ListViewItem">
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="True">
<Setter Property="Background" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
</ListView.Resources>
<ListView.View>
<GridView>
<GridViewColumn Header="Action">
<GridViewColumn.CellTemplate>
<DataTemplate>
...
In your ListView.Resources, override the ItemBackgroundHover brush resource:
<SolidColorBrush x:Key="ItemBackgroundHover" Color="Transparent" />
Do the same for ItemBackgroundSelected if you don't want the selected item to be highlighted.
You may also need to override the foreground brushes if you support the Modern Light theme. You can see the brushes that get applied here.
This won't work if you replace Modern UI's ListViewItem style with your own, but you could base yours off of theirs, and it should work:
<Style TargetType="ListViewItem"
BasedOn="{StaticResource {x:Type ListViewItem}}">
Also, based on your screenshot, you probably don't need to be using a ListView, as you appaerntly don't care about selecting items. You could use a simple ItemsControl.
To remove the button chrome, you can create a style like this:
<Style x:Key="GlyphButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border>
<ContentPresenter x:Name="ContentSite" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="ContentSite"
Property="Margin"
Value="1,1,-1,-1" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The older answers here didn't work for me. I was forced to override the ListView.ItemContainerStyle:
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Grid Background="{TemplateBinding Background}">
<Border Name="Selection" Visibility="Collapsed" />
<!-- This is used when GridView is put inside the ListView -->
<GridViewRowPresenter Grid.RowSpan="2"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I found and modified the code from here which was mentioned in the other answer by Mike Strobel. The majority of changes I made was removing the trigger section.
<Style x:Key="Body_Content_DataGrid_Centering" TargetType="{x:Type DataGridCell}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter VerticalAlignment="Center" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="BorderBrush" Value="DarkGray" />
<Setter Property="BorderThickness" Value="0.5" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have included above code in App.xaml file. But the trigger function never triggers on DataGrid cell focus. Can anyone explain why this happens?
Try use FocusVisualStyle. With it, you can set the focus frame and additional values.
Sample:
<!-- CellFocusVisual -->
<Style x:Key="CellFocusVisual" TargetType="{x:Type Control}">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Control}">
<Border SnapsToDevicePixels="True" CornerRadius="0" BorderThickness="2" BorderBrush="#7B2F81" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- DataGridCell -->
<Style TargetType="{x:Type DataGridCell}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="BorderBrush" Value="{x:Null}" />
<Setter Property="FocusVisualStyle" Value="{StaticResource CellFocusVisual}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Border x:Name="BackgroundBorder" BorderThickness="3" Background="Transparent">
<ContentPresenter VerticalAlignment="Center" Margin="4,0,6,0" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Focuses are different. See the link for more information.
Hi I try make a style with rounded corners for label and expander control.
Label style:
<Style x:Key="InfoLabelStyle" TargetType="{x:Type Label}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Label}">
<Border Name="Border" Background="#BFE3FE" BorderBrush="#BFE3FE" BorderThickness="1" CornerRadius="7" Padding="3">
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="FontSize" Value="12"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="Height" Value="25"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="#BFE3FE"/>
<Setter Property="Background" Value="#BFE3FE"/>
<Setter Property="Margin" Value="2,4,0,1" />
<Setter Property="Padding" Value="4,0,0,0" />
</Style>
I use multibinding on this style in view:
<Label Style="{StaticResource InfoLabelStyle}">
<Label.Content>
<MultiBinding StringFormat="{}{0}, {1} rokov">
<Binding Path="Oponent.Info.Sex" Converter="{StaticResource sexConverter}"/>
<Binding Path= "Oponent.Info.Age"/>
</MultiBinding>
</Label.Content>
</Label>
But if I run app, content of this label is empty, binding is good, I try it on textBox control and work.
Second problem is, I would like have also rounded corners on expander control.
I try same way as in label style:
<Style x:Key="InfoExpanderStyle" TargetType="{x:Type Expander}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Expander}">
<Border Name="Border" Background="#BFE3FE" BorderBrush="#BFE3FE" BorderThickness="1" CornerRadius="7" Padding="3">
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Applu style on Expander control:
<Expander Name="InfoExapnder"
Header="{Binding Path=Oponent.Info.Nick, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"
Style="{StaticResource InfoExpanderStyle}"
IsExpanded="True"
FontSize="18"
FontWeight="Normal"
Background="#ECEBEB"
Margin="3,0,3,0"
Grid.Row="0">
<Grid>
</Grid>
But result is same, empty content of the control.
What I do bad?
The label is empty because you've re-templated it but not specified where the content should be placed. You want something like:
<ControlTemplate TargetType="{x:Type Label}">
<Border Name="Border" Background="#BFE3FE" BorderBrush="#BFE3FE" BorderThickness="1" CornerRadius="7" Padding="3">
<ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
</Border>
</ControlTemplate>