I have a DatePicker in my application, that consists of DockPanels in a StackPanel in a ScrollViewer in a UserControl.
The (simplified) xaml of the UserControl looks like this:
<UserControl x:Class="project.UI1"
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"
xml:lang="de-DE"
mc:Ignorable="d" >
<UserControl.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Width" Value="250"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="TextAlignment" Value="Right"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Margin" Value="2"/>
<Setter Property="Padding" Value="3"/>
</Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="DockPanel.Dock" Value="Top"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="MaxWidth" Value="{Binding RelativeSource={RelativeSource AncestorType=Border},Path=ActualWidth}"/>
<Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
</Style>
<Style TargetType="{x:Type DatePicker}">
<Setter Property="Margin" Value="2"/>
<Setter Property="Width" Value="105"/>
<Setter Property="MaxWidth" Value="105"/>
<Setter Property="Height" Value="24"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
</Style>
<Style TargetType="{x:Type DockPanel}">
<Setter Property="DockPanel.Dock" Value="Top"/>
</Style>
<Style TargetType="{x:Type Border}">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="2"/>
</Style>
<Style TargetType="{x:Type ScrollViewer}">
<Setter Property="HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
</Style>
</UserControl.Resources>
<ScrollViewer>
<StackPanel>
<DockPanel>
<TextBlock Text="IK-Nummer des Absenders (z.B. D-Arzt)"/>
<Border>
<TextBox Text="{Binding p_1}"/>
</Border>
</DockPanel>
<DockPanel>
<TextBlock Text="IK-Nummer der UNI-DAV aus UV-Träger-Verzeichnis"/>
<Border>
<TextBox Text="{Binding p_2}" />
</Border>
</DockPanel>
<DockPanel>
<TextBlock Text="Datum der Erstellung durch den Leistungserbringer"/>
<DatePicker SelectedDate="{Binding p_3}"/>
</DockPanel>
</StackPanel>
</ScrollViewer>
</UserControl>
The TextBlocks have a 250px fixed width and hold the description of the fields while the TextBoxes for the user input are supposed to grow & shrink dynamically as the user resizes the window, to fit the rest of the window width.This is why I came up with packing every TextBlock/TextBox-combo in a DockPanel, and stack those in a StackPanel.
However, when I click on the DatePicker, the calendar beyond spans across the whole screen:
Even though this looks quite funky, I would prefer to get the common square calendar "popup" back.
Unfortunately, I don't know what causes the calendar to go wild like this at the moment...
The problem is your TextBlock style. It is being applied to the DateTimePicker because it has no key and so applies to all TextBlocks down the visual tree.
Can you give the style a key and only apply it to certain TextBlocks?
<Style TargetType="{x:Type TextBlock}" x:Key="TextBlockStyle">
<Setter Property="Width" Value="250"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="TextAlignment" Value="Right"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Margin" Value="2"/>
<Setter Property="Padding" Value="3"/>
</Style>
....
<TextBlock Text="IK-Nummer der UNI-DAV aus UV-Träger-Verzeichnis"
Style="{StaticResource TextBlockStyle}"/>
UPDATE:
OR, you could just add a new TextBlock style to the DatePicker's resource to override the style higher up in the visual tree:
<DatePicker SelectedDate="{Binding p_3}">
<DatePicker.Resources>
<Style TargetType="{x:Type TextBlock}"/>
</DatePicker.Resources>
</DatePicker>
Related
I have a problem with Styles in XAML, and maybe you could help me.
i have created a ResourceDictionary "controldefaultstyle":
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="{x:Type Control}" x:Key="ControlDefaultStyle" >
<Style.Setters>
<Setter Property="FontFamily" Value="{Binding Path=FontFamily, Source={x:Static Application.Current}, UpdateSourceTrigger=PropertyChanged}"/>
<Setter Property="FontSize" Value="{Binding Path=FontSize, Source={x:Static Application.Current}, UpdateSourceTrigger=PropertyChanged}"/>
<Setter Property="Background" Value="{StaticResource SystemBackground}"/>
<Setter Property="Foreground" Value="{StaticResource SystemForeground}"/>
</Style.Setters>
</Style>
than i made two other ResourceDictionaries, One which bases on the button and the controldefaultstyle:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ext="clr-namespace:StyleResourceDictionariesDemo.ResourceDictionaries.Classes">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ControlDefaultStyle.xaml"/>
</ResourceDictionary.MergedDictionaries>
<Style TargetType="{x:Type Button}" x:Key="ButtonStyle" >
<Style.BasedOn>
<ext:MergedStyles BasedOn="{StaticResource {x:Type Button}}" MergeStyle="{StaticResource ControlDefaultStyle}"/>
</Style.BasedOn>
<Style.Setters>
<Setter Property="Width" Value="100"/>
<Setter Property="Height" Value="30"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}" >
<Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" ClipToBounds="True">
<Rectangle x:Name="buttonFrame" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Stroke="{TemplateBinding Background}" RadiusX="5" RadiusY="5" StrokeThickness="1" Fill="Transparent"/>
<Rectangle x:Name="buttonBody" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Stroke="Transparent" RadiusX="5" RadiusY="5" StrokeThickness="1" Fill="{TemplateBinding Background}"/>
<TextBlock x:Name="buttonText" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{TemplateBinding Content}"
Foreground="{TemplateBinding Foreground}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource IsMouseOverBackground}"/>
<Setter Property="Foreground" Value="{StaticResource IsMouseOverForeground}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{StaticResource IsPressedBackground}"/>
<Setter Property="Foreground" Value="{StaticResource IsPressedForeground}"/>
</Trigger>
</Style.Triggers>
</Style>
and another on which uses Textblock and the ControlDefaultStyle:
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ControlDefaultStyle.xaml"/>
</ResourceDictionary.MergedDictionaries>
<Style TargetType="{x:Type TextBlock}" x:Key="TextBlockStyle" >
<Style.BasedOn>
<classes:MergedStyles BasedOn="{StaticResource {x:Type TextBlock}}" MergeStyle="{StaticResource ControlDefaultStyle}"/>
</Style.BasedOn>
<Style.Setters>
<Setter Property="Width" Value="200"/>
<Setter Property="Height" Value="150"/>
<Setter Property="TextAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<!--<Setter Property="Background" Value="{StaticResource TextBlockBackground}"/>-->
<!--<Setter Property="Foreground" Value="{StaticResource TextBlockForeground}"/>-->
</Style.Setters>
</Style>
when using the button style on a button, everything works as expected and the colors changes as wished, but the textblock does not change the background and i don't get why. Textblock and Button should look the same (for background and foreground)
Any Conclusion?
Kind Regards
Mirko
edit: left correct, right background should be blue and not white.
Changing Fontfamily (Combobox) and Size (Slider controlled), are working for both the buttons and the Textblock.
TextBlock does not inherit from control.
Take a look at the inheritance chain:
https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.textblock?view=netframework-4.8
Object
DispatcherObject
DependencyObject
Visual
UIElement
FrameworkElement
TextBlock
That's why your base style targeting control will not be applied to a textblock.
I am using MahApps.Metro for wpf UI. I want to change textalignment of MetroTabItem.
I set HorizontalContentAlignment to center. The below code is not working.
<metroControls:MetroAnimatedTabControl
metroControls:TabControlHelper.Underlined="SelectedTabItem"
ItemsSource="{Binding TabControlCollection}" SelectedIndex="0">
<metroControls:MetroAnimatedTabControl.Resources>
<Style TargetType="{x:Type metroControls:MetroTabItem}">
<Setter Property="metroControls:ControlsHelper.HeaderFontSize" Value="34"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="Width" Value="200"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Header" Value="{Binding Header}"/>
</Style>
How to center in this case?
Ok. I am solved this question.
I added some code in source. It is perfect working.
<Style TargetType="{x:Type metroControls:MetroTabItem}">
<Setter Property="metroControls:ControlsHelper.HeaderFontSize" Value="34"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="Width" Value="200"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate DataType="{x:Type TabItem}">
<TextBlock Text="{Binding Header}" HorizontalAlignment="Center"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
I have a horizontal listview and I have set all sorts of stretch properties but the list view item remains in the center leaving some space on right and left side of the actual data template grid. I have also noticed same behaviour on vertical listview.
as you can see in the image above the gap is there and is used by the listviewitem reveal highlight. I want to remove this gap.
Code
<ListView Style="{StaticResource PivotListViewStyle}">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Style="{StaticResource TileGridStyle}" >
<-- other irrelivant xaml-->
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Styles
<Style TargetType="ListView" x:Key="StretchListviewStyle">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
</Style>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="ListView" x:Key="PivotListViewStyle" BasedOn="{StaticResource StretchListviewStyle}">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<ItemsStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="TileGridStretchStyle" TargetType="Grid">
<Setter Property="Height" Value="{StaticResource MainItemHeight}"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="Margin" Value="2"/>
<Setter Property="Padding" Value="4"/>
<Setter Property="Background">
<Setter.Value>
<SolidColorBrush Color="{ThemeResource SystemAccentColor}"/>
</Setter.Value>
</Setter>
</Style>
<x:Double x:Key="MainItemHeight">114</x:Double>
<Style x:Key="TileGridStyle" TargetType="Grid" BasedOn="{StaticResource TileGridStretchStyle}">
<Setter Property="Width" Value="{StaticResource MainItemHeight}"/>
</Style>
Repro
to reproduce the issue you can see this minimal project : https://github.com/touseefbsb/ListViewItemSpacingBug
This is because the default Padding of a ListViewItem is 12,0,12,0.
Override the padding with another value:
<Style TargetType="ListView" x:Key="StretchListviewStyle">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="Padding" Value="1"/>
</Style>
</Setter.Value>
</Setter>
</Style>
And this is what you get:
I would like to nest Styles in WPF.
I have a resource dictionary:
<Style x:Key="BottomButtonBar" TargetType="{x:Type Grid}">
<Style TargetType="{x:Type Button}">
<Setter Property="Margin" Value="10,2" />
<Setter Property="Width" Value="90" />
</Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Margin" Value="2,0"/>
</Style>
</Style>
What I want is: If I apply the style "BottomButtonBar" on a grid, Buttons which are inside this grid have Margin and Width I've defined and the same for the TextBlock inside this grid.
How to do that?
I finally found the following solution:
<Style x:Key="BottomButtonBar" TargetType="{x:Type Grid}">
<Style.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Margin" Value="10,2" />
<Setter Property="Width" Value="90" />
</Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Margin" Value="2,0"/>
</Style>
</Style.Resources>
</Style>
And in the XAML:
<Grid DockPanel.Dock="Bottom" Style="{DynamicResource BottomButtonBar}">
If you want to add styles to elements in the Grid, you can make the styles implicit and add them to the resources of the Grid to limit their scope:
<Grid>
<Grid.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Margin" Value="10,2" />
<Setter Property="Width" Value="90" />
</Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Margin" Value="2,0"/>
</Style>
<Grid.Resources />
<Button ... />
</Grid>
I am populating my datagrid and did some styling on the DataGrid. I keep getting white space on the left side of the DataGrid. I've tried to set paddings and margins to 0 and still get the white space. I've attached a screenshot below. Please advice how to get rid of that white space.
XAML Code:
<Window.Resources>
<!-- DataGrid style -->
<Style x:Key="DataGridStyle1" TargetType="{x:Type DataGrid}">
<Setter Property="ColumnHeaderStyle" Value="{DynamicResource ColumnHeaderStyle1}"/>
<Setter Property="CellStyle" Value="{DynamicResource CellStyle1}"/>
</Style>
<!-- DataGridColumnHeader style -->
<Style x:Key="ColumnHeaderStyle1" TargetType="DataGridColumnHeader">
<Setter Property="Height" Value="27"/>
<Setter Property="Background" Value="#191919"/>
<Setter Property="Foreground" Value="Cyan"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Padding" Value="3,2,2,2"/>
</Style>
<Style x:Key="CellStyle1" TargetType="DataGridCell">
<Setter Property="Height" Value="25"/>
<Setter Property="Background" Value="#333333"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="BorderThickness" Value="0.1"/>
</Style>
</Window.Resources>
<Grid>
<Canvas>
<DataGrid x:Name="dataGrid1" Canvas.Left="10" Canvas.Top="10" Height="auto" Width="auto" MaxHeight="400" AutoGenerateColumns="True" Style="{DynamicResource DataGridStyle1}"/>
</Canvas>
</Grid>
The stuff you can see are called row headers.
You can remove them by setting their width to 0.
Add this to the Datagrid style:
<Setter Property="RowHeaderWidth" Value="0" />