WPF ListBoxItem how to wrap text in it? My Item container style looks like this:
<Style x:Key="GroupListBoxItemStyle"
TargetType="ListBoxItem">
<Setter Property="OverridesDefaultStyle"
Value="True" />
<Setter Property="FocusVisualStyle"
Value="{x:Null}" />
<Setter Property="FontSize"
Value="11" />
<Setter Property="FontWeight"
Value="Bold" />
<Setter Property="Width"
Value="95" />
<Setter Property="HorizontalAlignment"
Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<SlidingBar:SlidingBarRadioButton GroupName="PermissionsRadioButtonGroup"
IsChecked="{Binding Path=IsSelected,RelativeSource={RelativeSource TemplatedParent},BindsDirectlyToSource=True,Mode=TwoWay}"
Text="{Binding Converter={StaticResource resourceStringToResourceConverter}}"
ImageSource="{Binding Converter={StaticResource PermissionTypeToImageConverter}}"
Margin="1"
/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Make sure you set the following properties to the ListBox/ListView:
HorizontalContentAlignment="Stretch"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Related
I'm setting in a WPF application the style of a button with this:
<Style TargetType="{x:Type Button}">
<Setter Property="ToolTipService.InitialShowDelay" Value="0"/>
<Setter Property="Height" Value="22" />
<Setter Property="Margin" Value="1" />
<Setter Property="Padding" Value="0" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
Padding="{TemplateBinding Padding}"
BorderThickness="1">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Margin="1 -1 1 0"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="{StaticResource NotSelectedButton}" />
<Setter Property="Foreground" Value="{StaticResource ActiveFg}" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource Selected}" />
<Setter Property="Foreground" Value="{StaticResource SelectedFg}" />
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Background" Value="{StaticResource NotSelectedButton}" />
<Setter Property="Foreground" Value="{StaticResource ActiveFg}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="{StaticResource NotSelectedButton}" />
<Setter Property="Foreground" Value="{StaticResource InactiveFg}" />
<!--<Setter Property="Foreground" Value="{StaticResource NotSelected}" />-->
</Trigger>
</Style.Triggers>
</Style>
However I want the TextBlock in the ContentPresenter to use a named TextBlock style defined as such:
<Style x:Key="ButtonText" TargetType="{x:Type TextBlock}">
<Setter Property="ToolTipService.InitialShowDelay" Value="0"/>
<Setter Property="Width" Value="auto" />
<Setter Property="MinWidth" Value="20" />
<Setter Property="TextAlignment" Value="Left" />
<Setter Property="Padding" Value="0 0 0 0" />
<Setter Property="Margin" Value="1 0 0 0" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
To test this style, just a Button in a UserControl or Window suffices: <Button>, and the style definitions can go in a resource dictionary (of UserControl or Window).
How can I do this ?
Trivial Solution via Direct Assignment
You can set the style directly by assigning a TextBlock as Content of each Button.
<Button>
<TextBlock Text="Test" Style="{StaticResource ButtonText}"/>
</Button>
Support Text As Content Only
If you are sure that you only put strings as content into your button, you can assign a ContentTemplate that contains a TextBlock to the ContentPresenter. This will not work for other content types in the sense that it would not display them as usual, but just their type name in the TextBlock.
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Margin="1 -1 1 0">
<ContentPresenter.ContentTemplate>
<DataTemplate>
<TextBlock Style="{StaticResource ButtonText}" Text="{Binding}"/>
</DataTemplate>
</ContentPresenter.ContentTemplate>
</ContentPresenter>
Support All Content Types
If you want to support any content type as content of your button, you can define the data template from above in the ContentPresenter.Resources. Then, the ContentPresenter will only apply it, if the Content is a string. For all other content types it will work as usual.
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Margin="1 -1 1 0">
<ContentPresenter.Resources>
<DataTemplate DataType="{x:Type system:String}">
<TextBlock Style="{StaticResource ButtonText}" Text="{Binding}"/>
</DataTemplate>
</ContentPresenter.Resources>
</ContentPresenter>
I am trying to achieve my save button to reusable button and original button style is like this=>
<Button Margin="5"
Padding="0"
Width="98"
Cursor="Hand"
x:Name="btnSave"
Click="btnSave_Click">
<StackPanel Orientation="Horizontal" Height="25" Width="90">
<Image Source="\Image\Other\Save.ico" Width="20" Margin="3 0"></Image>
<TextBlock VerticalAlignment="Center" Margin="15 0">Save</TextBlock>
</StackPanel>
</Button>
Just text and image. So I just want to use this button as a reusable button. So I move this button to App.xaml Like this=>
<Style TargetType="Button" x:Key="SaveButton" BasedOn="{StaticResource MetroButton}">
<Setter Property="Margin" Value="5"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Width" Value="98"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="FontSize" Value="12"/>
<Style.Resources>
<Style TargetType="StackPanel">
<Setter Property="Orientation" Value="Horizontal"/>
<Setter Property="Height" Value="25"/>
<Setter Property="Width" Value="90"/>
<Setter Property="Background" Value="Red"/>
<Style.Resources>
<Style TargetType="Image">
<Setter Property="Source" Value="/Image/Other/Save.ico"/>
<Setter Property="Width" Value="20"/>
<Setter Property="Margin" Value="3 0"/>
</Style>
<Style TargetType="TextBlock">
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Margin" Value="15 0"/>
<Setter Property="Text" Value="Save"/>
</Style>
</Style.Resources>
</Style>
</Style.Resources>
</Style>
But after moving that, This button is not working anymore. Please let me know why this one is not working.
You said you wanted to reuse styles, so you shouldn't nest them. The right thing to do is：
<Style x:Key="SaveButton" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<StackPanel Orientation="Horizontal" Height="25" Width="90" Background="Red">
<Image/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You need to define the StackPanel somewhere and set the Button's Content property to it. You may define the StackPanel as a non-shared resource next to the Style in App.xaml like this:
<StackPanel x:Key="sp" x:Shared="False" Orientation="Horizontal" Height="25" Width="90">
<Image Source="screen.png" Width="20" Margin="3 0"></Image>
<TextBlock VerticalAlignment="Center" Margin="15 0">Save</TextBlock>
</StackPanel>
<Style TargetType="Button" x:Key="SaveButton">
<Style.Resources>
</Style.Resources>
<Setter Property="Margin" Value="5"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Width" Value="98"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="Content" Value="{StaticResource sp}" />
</Style>
My ListView should have following style:
no border around the whole ListView (achieved)
no highlighting when interacting with ListViewItem (achieved)
border around selected ListViewItem (missing)
My ListView:
<ListView DisplayMemberPath="Name" BorderThickness="0" >
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<!-- get rid of the highlighting -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
<!-- style selected item -->
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="FontSize" Value="20" />
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
</ListView>
I tried this and this, both doesn't work for me. I guess my problem is the template but I have no idea how to put a border around the selected ListViewItem.
Update
Working solution:
<ListView DisplayMemberPath="Name" BorderThickness="0" >
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<!-- get rid of the highlighting -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border x:Name="Border">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="FontSize" Value="20" />
<Setter Property="FontWeight" Value="Bold" />
<Setter TargetName="Border" Property="BorderBrush" Value="Black"/>
<Setter TargetName="Border" Property="BorderThickness" Value="2"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
Maybe this works. Add a Border around ContentPresenter an use controlTemplate Triggers
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border x:Name="Border">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="FontSize" Value="20" />
<Setter Property="FontWeight" Value="Bold" />
<Setter TargetName="Border" Property="BorderBrush" Value="Red"/>
<Setter TargetName="Border" Property="BorderThickness" Value="1"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
I have few problem with DataGrid style.
I need it change two corners, when I try to do that by example my data disappear, its possible do that with my code?
My code is:
...<Style TargetType="{x:Type DataGrid}">
<Setter Property="Background" Value="#FFFFFF"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="#E6E6E6"/>
</Style>
<DataGridTextColumn x:Key="price" Header="Price, € " FontFamily="Arial" Width="0.3*" Binding="{Binding adress}" IsReadOnly="True"
FontSize="18" FontWeight="Normal" Foreground="#4D4D4D">
<DataGridTextColumn.ElementStyle>
<Style TargetType="TextBlock">
<Setter Property="Width" Value="25"/>
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Right"/>
</Style>
</DataGridTextColumn.ElementStyle>
<DataGridTextColumn.HeaderStyle>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Background" Value="#FFFFFF"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="#E6E6E6"/>
<Setter Property="Height" Value="35"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="FontSize" Value="15"/>
<Setter Property="IsEnabled" Value="False"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
</Style>
</DataGridTextColumn.HeaderStyle>
</DataGridTextColumn>
<Style TargetType="DataGridCell">
<Setter Property="BorderThickness" Value="0"/>
<Style.Triggers>
<Trigger Property="DataGrid.IsSelected" Value="True">
<Setter Property="Background" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#FFD65E" />
<Grid>
<DataGrid x:Name="lbPersonList" Margin="30,98,362,30" AlternationCount="2" VerticalScrollBarVisibility="Visible" AutoGenerateColumns="False"
RowHeight="42" GridLinesVisibility="None" HorizontalGridLinesBrush="#E6E6E6" CanUserAddRows="False"
HeadersVisibility="Column" >
<DataGrid.Columns>
<StaticResource ResourceKey="product"/>
<StaticResource ResourceKey="unit price"/>
<StaticResource ResourceKey="quantity"/>
<StaticResource ResourceKey="price"/>
</DataGrid.Columns>
</DataGrid>
2.
How to remove this empty field, I removed last row so this empty field is not row ?
You have to edit the default ControlTemplate of DataGrid by adding <Border> to the root grid control
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGrid}">
<Border x:Name="Border" CornerRadius="13" Background="#232323" SnapsToDevicePixels="True"/>
<Grid>
........
.......
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
you can find the default ControlTemplate of DataGrid at
https://msdn.microsoft.com/en-us/library/cc278066(v=vs.95).aspx
I'm trying to add an effect to style in order to reuse it, but from some reason it doesnt work...
<Style x:Key="NumericTextBoxStyle" TargetType="{x:Type TextBox}">
<Style.Resources>
<TextBox.Effect x:Key="EffectStyle">
<DropShadowEffect BlurRadius="56"
Direction="392"
Color="#FF872E2E"
RenderingBias="Quality"/>
</TextBox.Effect>
</Style.Resources>
<Setter Property="Height" Value="25"/>
<Setter Property="Width" Value="120"/>
<Setter Property="HorizontalAlignment" Value="Right"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="TextAlignment" Value="Center"/>
</Style>
but how do i add the style part ? (also how do i declare for the effect ?)
thanks
Try to add the Effect as a Setter instead
<Style x:Key="NumericTextBoxStyle" TargetType="{x:Type TextBox}">
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="56"
Direction="392"
Color="#FF872E2E"
RenderingBias="Quality"/>
</Setter.Value>
</Setter>
<Setter Property="Height" Value="25"/>
<Setter Property="Width" Value="120"/>
<Setter Property="HorizontalAlignment" Value="Right"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="TextAlignment" Value="Center"/>
</Style>
Or if you want to have the Effect as a Resource in the Style you can do it like this
<Style x:Key="NumericTextBoxStyle" TargetType="{x:Type TextBox}">
<Style.Resources>
<DropShadowEffect x:Key="dropShadowEffect"
BlurRadius="56"
Direction="392"
Color="#FF872E2E"
RenderingBias="Quality"/>
</Style.Resources>
<Setter Property="Effect" Value="{StaticResource dropShadowEffect}"/>
<!--...-->
</Style>
You can also make your effect a global resource, in order to use it with other styles/controls:
<Grid>
<Grid.Resources>
<DropShadowEffect x:Key="dropShadowEffect" BlurRadius="56"
Direction="392"
Color="#FF872E2E"
RenderingBias="Quality"/>
<Style x:Key="NumericTextBoxStyle" TargetType="{x:Type TextBox}">
<Setter Property="Effect" Value="{StaticResource dropShadowEffect}" />
<Setter Property="Height" Value="25"/>
<Setter Property="Width" Value="120"/>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<TextBox Style="{StaticResource NumericTextBoxStyle}" />
<TextBox Style="{StaticResource NumericTextBoxStyle}" Grid.Row="1" />
<ComboBox Effect="{StaticResource dropShadowEffect}" Grid.Row="2" />
</Grid>