<Border Grid.Row="1" Padding="15" Margin="15" BorderBrush="LightBlue" Background="AliceBlue" BorderThickness="1">
<ListBox ItemsSource="{Binding Configs}">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Focusable" Value="False" />
<Setter Property="BorderThickness" Value="0" />
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<view:Config />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Border>
This is the code I've written in XAML. However, it doesn't appear to affect anything.
There are so many posts on SO with similar questions but all of their response are "use ListBox.ItemContainerStyle" which I've done :S Such as There is no ListBox.SelectionMode="None", is there another way to disable selection in a listbox? and WPF, XAML: How to style a ListBoxItem using binding on property of ListBox ItemsSource object?
What I would expect is that there is no background, no border and the item is not focusable.
What have I done wrong?
Redefine the ControlTemplate of your ListBoxItem. The sample code below uses a redish color just to make the point, but you can just replace it with Transparent:
<Window x:Class="WpfApplication235.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
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"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:local="clr-namespace:WpfApplication235"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<x:Array x:Key="SampleData" Type="{x:Type sys:String}">
<sys:String>Item 1</sys:String>
<sys:String>Item 2</sys:String>
<sys:String>Item 3</sys:String>
<sys:String>Item 4</sys:String>
<sys:String>Item 5</sys:String>
</x:Array>
<Style x:Key="ListBoxItemStyle1" TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<TextBlock Text="{Binding}">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#1FFF0000"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<ListBox x:Name="listBox" ItemsSource="{StaticResource SampleData}"
ItemContainerStyle="{StaticResource ListBoxItemStyle1}"
Height="150" Margin="0" Width="250"/>
</Grid>
and using a Transparent background, no focus, no highlighting, as required:
You can use style in resource like:
<Window.Resources>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="#D8D8D8"/>
<Setter Property="FontSize" Value="15"/>
<Setter Property="FontWeight" Value="400"/>
<Setter Property="Height" Value="30"/>
<!--and so on whatever you want...-->
</Style>
</Window.Resources>
And remove code like:
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Focusable" Value="False" />
<Setter Property="BorderThickness" Value="0" />
</Style>
</ListBox.ItemContainerStyle>
And don't use any property in listBox which is used in style, other wise it will not behave which is described in style.
Related
I want to define a style for the text box and within the style I want to bind to a property which the corresponding style applies to. Something like this:
<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource {x:Type TextBox}}">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="True">
<Setter Property="ToolTip">
<Setter.Value>
<TextBlock Text="{Binding ????Bind to the textbox TEXT property????}">
</TextBlock>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
Is this possible at all?
Here the full Window:
<Window x:Class="StyleBinding.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
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"
xmlns:local="clr-namespace:StyleBinding"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource {x:Type TextBox}}">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="True">
<Setter Property="ToolTip">
<Setter.Value>
<TextBlock Text="{Binding Text, RelativeSource={RelativeSource Self}}"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<TextBox HorizontalAlignment="Left" Height="34" Margin="235,140,0,0" TextWrapping="Wrap" IsEnabled="True"
Text="Just a simple text" VerticalAlignment="Top" Width="284">
</TextBox>
</Grid>
</Window>
You just have to use a RelativeSource binding to access the Text property of the TextBox.
<Setter Property="ToolTip" Value="{Binding Text, RelativeSource={RelativeSource Self}}"/>
In case you build a custom tool tip template in your style, you can do it like this.
<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource {x:Type TextBox}}">
<Setter Property="ToolTip">
<Setter.Value>
<ToolTip>
<TextBlock Text="{Binding PlacementTarget.Text, RelativeSource={RelativeSource AncestorType={x:Type ToolTip}}}"/>
</ToolTip>
</Setter.Value>
</Setter>
</Style>
The PlacementTarget of the ToolTip is the TextBox here.
Here's a working example:
<Style BasedOn="{StaticResource {x:Type TextBox}}" TargetType="{x:Type TextBox}">
<Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=Text}" />
</Style>
The key is to use a RelativeSource binding of Self.
There's no need to set a trigger on IsEnabled because a ToolTip will only display on an enabled control by default.
I'm using MaterialDesign and the Xceed IntegerUpDown control in a WPF project. I'm trying to display errors associated with the updown control as a tooltip when the mouse hovers over the control.
I've gotten this to work with TextBoxes and TextBlocks by using the following global style:
<Style TargetType="{x:Type TextBox}"
BasedOn="{StaticResource CustomizedMaterialDesignTextBox}" >
<Setter Property="Margin" Value="5"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="True">
<Setter Property="ToolTip">
<Setter.Value>
<ToolTip DataContext="{Binding RelativeSource={RelativeSource Self}, Path=PlacementTarget}"
Background="{DynamicResource ValidationErrorBrush}">
<ItemsControl ItemsSource="{Binding Path=(Validation.Errors)}"
DisplayMemberPath="ErrorContent"/>
</ToolTip>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
But when I tried to adapt this to the updown control as follows, no tooltip is displayed:
<Style TargetType="{x:Type xctk:IntegerUpDown}">
<Setter Property="Margin" Value="5"/>
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="True">
<Setter Property="ToolTip">
<Setter.Value>
<ToolTip DataContext="{Binding RelativeSource={RelativeSource Self}, Path=PlacementTarget}"
Background="{DynamicResource ValidationErrorBrush}">
<ItemsControl ItemsSource="{Binding Path=(Validation.Errors)}"
DisplayMemberPath="ErrorContent"/>
</ToolTip>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
No error message about a failed binding or whatnot is displayed in the output window when the app is run in the VS 2017 debugger and an error condition is triggered.
Interestingly, a red border appears around the control when an error condition exists, even without the custom updown style.
You didn't show how exactly you're binding it but remember to 1) specify UpdateSourceTrigger and 2) actually hover over it ! Here's a MCVE showing that it actually works with no problem.
XAML:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
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"
xmlns:xctk="clr-namespace:Xceed.Wpf.Toolkit;assembly=Xceed.Wpf.Toolkit"
xmlns:local="clr-namespace:WpfApp5"
x:Class="WpfApp5.MainWindow"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style TargetType="{x:Type xctk:IntegerUpDown}">
<Setter Property="Margin" Value="5"/>
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="True">
<Setter Property="ToolTip">
<Setter.Value>
<ToolTip DataContext="{Binding RelativeSource={RelativeSource Self}, Path=PlacementTarget}"
Background="{DynamicResource ValidationErrorBrush}">
<ItemsControl ItemsSource="{Binding Path=(Validation.Errors)}"
DisplayMemberPath="ErrorContent"/>
</ToolTip>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Window.DataContext>
<local:SampleViewModel/>
</Window.DataContext>
<Grid>
<xctk:IntegerUpDown Text="{Binding MyInteger, UpdateSourceTrigger=PropertyChanged}"
FontSize="24"
Width="125"
Height="50"/>
</Grid>
I need help,
when I click at datagrid at cell, I want to select all line like in image (please look at image), but without black border. how to disable, or change color to transparent? I tried this:
<DataGrid.Resources>
<Style TargetType="DataGridCell">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
</Style>
</DataGrid.Resources>
but don't work. nothing changes.
You need to style the selected cell not just cells. To do so you need to write this inside your style tag:
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="BorderThickness" Value="0"/>
</Trigger>
</Style.Triggers>
All you need was using Triggers hope it will work for you. Also you can change background for selected cell or whatever property you want.
Following example to customize wpf datagrid (border, cell corners, etc.). You can modify it as you wish.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>
<Style x:Key="cellStyle" TargetType="DataGridCell">
<Setter Property="Padding" Value="0" />
<Setter Property="Margin" Value="2" />
<Setter Property="Background" Value="Black" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DataGridCell">
<Border Background="Black" BorderThickness="0">
<Border x:Name="border"
BorderBrush="White"
BorderThickness="2"
Background="Black"
CornerRadius="5">
<ContentPresenter />
</Border>
</Border>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsSelected}" Value="true">
<Setter TargetName="border" Property="Background" Value="Orange"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="rowStyle" TargetType="DataGridRow">
<Setter Property="Padding" Value="0" />
<Setter Property="Margin" Value="0" />
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Background" Value="Black" />
</Style>
<Grid>
<DataGrid HeadersVisibility="None" GridLinesVisibility="None" SelectionMode="Single" SelectionUnit="Cell" IsReadOnly="true"
RowStyle="{StaticResource rowStyle}" CellStyle="{StaticResource cellStyle}"
Background="Black" Foreground="White" ItemsSource="{Binding MyData}" />
</Grid>
</Page>
I am using MahApps TabControl. If I add Items from xaml I can set "CloseButtonEnabled =true" and the Close button is showed, when I try to bind ItemSource, the close button does not appear. Any ideas, how I could solve this problem?
Here is my sample code:
<Window.Resources>
<Style BasedOn="{StaticResource MetroTabItem}" TargetType="{x:Type Controls:MetroTabItem}">
<Setter Property="Controls:ControlsHelper.HeaderFontSize" Value="15"/>
<Setter Property="Foreground" Value="Red"/>
<Setter Property="CloseButtonEnabled" Value="True"/>
</Style>
</Window.Resources>
<Controls:MetroTabControl ItemsSource="{Binding AvailableFiles}" SelectedIndex="{Binding SelectedIndex}" Grid.Row="1" >
<Controls:MetroTabControl.ItemTemplate >
<DataTemplate>
<TextBlock Text="{Binding Title}" />
</DataTemplate>
</Controls:MetroTabControl.ItemTemplate>
</Controls:MetroTabControl>
The problem here is that you override the complete style for the MetroTabItem.
If you only want additional changes then do this
<Window.Resources>
<Style BasedOn="{StaticResource {x:Type Controls:MetroTabItem}}" TargetType="{x:Type Controls:MetroTabItem}">
<Setter Property="Controls:ControlsHelper.HeaderFontSize" Value="15"/>
<Setter Property="Foreground" Value="Red"/>
<Setter Property="CloseButtonEnabled" Value="True"/>
</Style>
</Window.Resources>
The MetroTabItem in BasedOn="{StaticResource MetroTabItem}" is a style and not the type.
Hope that helps!
You can try following approach:
<Window.Resources>
<Style x:Key="MyCustomTabItem" BasedOn="{StaticResource MetroTabItem}" TargetType="{x:Type Controls:MetroTabItem}">
<Setter Property="Controls:ControlsHelper.HeaderFontSize" Value="15"/>
<Setter Property="Foreground" Value="Red"/>
<Setter Property="CloseButtonEnabled" Value="True"/>
</Style>
</Window.Resources>
<Controls:MetroTabControl ItemsSource="{Binding AvailableFiles}" ItemContainerStyle="{StaticResource MyCustomTabItem}" SelectedIndex="{Binding SelectedIndex}" Grid.Row="1" >
<Controls:MetroTabControl.ItemTemplate >
<DataTemplate>
<TextBlock Text="{Binding Title}" />
</DataTemplate>
</Controls:MetroTabControl.ItemTemplate>
</Controls:MetroTabControl>
I have created the following user control. When I add it to a xaml window, I get the error "Cannot create an instance of "ucAppItem". I dragged the user control onto the window from the toolbar.
XAML of user control is as follows:
<UserControl x:Class="Demos.ucAppItem"
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" Width="852" Height="215">
<Grid>
<Label Name="lblTitle" Content="Title" HorizontalAlignment="Left" Margin="233,10,0,0" VerticalAlignment="Top" FontSize="22" FontFamily="Arial"/>
<Image Width="40" Height="40" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,80,0">
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Source" Value="pack://siteoforigin:,,,/arrow2.png"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Source" Value="pack://siteoforigin:,,,/arrow1.png"/>
</Trigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
<Label x:Name="lblRun" Content="Run" HorizontalAlignment="Right" Margin="0,88,35,0" VerticalAlignment="Top" Foreground="#FF2EAADC" FontSize="20">
<Label.Style>
<Style TargetType="{x:Type Label}">
<Setter Property="Foreground" Value="#FF2EAADC"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="#006d9e"/>
</Trigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
</Grid>
</UserControl>
XAML of window is as follows:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Demos" x:Class="Demos.Window1"
Title="Window1" Height="487" Width="854">
<Grid>
<local:ucAppItem/>
</Grid>
</Window>
Thanks for your help in advance!
#Anatoily Nikolaev - thanks for your help! Your pointer on the label fixed the issue I had with it and you were right about the image. I'll mark your response as the answer. It was the source that was the issue.
My label is now defined as:
<Label x:Name="lblRun" Content="Run" HorizontalAlignment="Right" Margin="0,88,35,0" VerticalAlignment="Top" FontSize="20">
<Label.Style>
<Style TargetType="{x:Type Label}">
<Setter Property="Foreground" Value="#FF2EAADC"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="#006d9e"/>
</Trigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
My image is now defined as:
<Image>
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Source" Value="{StaticResource arrow2}"/>
<Setter Property="Height" Value="40"/>
<Setter Property="Width" Value="40"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Margin" Value="0,0,80,0"/>
<Setter Property="HorizontalAlignment" Value="Right"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Source" Value="{StaticResource arrow1}"/>
</Trigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
And I have resources (set in the App.xaml file), set as this:
<Application x:Class="demos.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml">
<Application.Resources>
<BitmapImage x:Key="arrow1" UriSource="arrow1.png" />
<BitmapImage x:Key="arrow2" UriSource="arrow2.png" />
</Application.Resources>
</Application>
First, instead of pack://siteoforigin:,,,/arrow2.png need to write your actual URI and to make sure that the file exists in the project as a resource, like this (MSDN):
pack://application:,,,/arrow1.png
Secondly, trigger style for the label lblRun, will not work because you set this Foreground value locally, in WPF have a list of value precedence (MSDN), that the local value of a higher priority than the trigger style:
<Label x:Name="lblRun" Foreground="#FF2EAADC" FontSize="20" ... />
Try to remove it Foreground local value and use Style setter:
<Label x:Name="lblRun" Content="Run" HorizontalAlignment="Right" Margin="0,88,35,0" VerticalAlignment="Top" FontSize="20">
<Label.Style>
<Style TargetType="{x:Type Label}">
<Setter Property="Foreground" Value="#FF2EAADC"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="#006d9e"/>
</Trigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>