I can not apply the Style for custom UserControl.
Styles for TextBlock and MyControl are in the same dictionary.
Style for TextBlock used without problems.
But for MyControl style is not applied.
Why?
// XAML
xmlns:local="clr-namespace:MyControlNameSpace"
<Grid>
<TextBlock x:Name="text" Style="{DynamicResource TextStyle}"/>
<local:MyControl x:Name="control" Style="{DynamicResource ControlStyle}"/>
</Grid>
// RESOURCE DICTIONARY
<Style x:Key="ControlStyle" TargetType="{x:Type local:MyControl}">
<Setter Property="Height" Value="Auto"/>
<Setter Property="Width" Value="Auto"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="ColorMain" Value="Black"/>
<Setter Property="Margin" Value="2"/>
</Style>
<Style x:Key="TextStyle" TargetType="{x:Type TextBlock}">
....
<Setter Property="FontSize" Value="32"/>
...
</Style>
//PART of CS
public partial class MyControl: UserControl { .... }
Try changing
<Setter Property="ColorMain" Value="Black"/>
To
<Setter Property="Background" Value="Black"/>
Related
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>
Inside of app.xaml I have datagrid style
and for each window that contains a datagrid, I added an event setter for the datagridrow.
however, when I run it, I can see the style, but when I try to trigger the event nothing happens. if I remove the style from app.xaml. the event works well.
why app.xaml style disable my eventsetter?
here's the datagrid inside the app.xaml:
<Style TargetType="DataGrid">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="GridLinesVisibility" Value="None"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="RowStyle">
<Setter.Value>
<Style TargetType="DataGridRow">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="Foreground" Value="White"/>
</Style>
</Setter.Value>
</Setter>
<Setter Property="ColumnHeaderStyle">
<Setter.Value>
<Style TargetType="DataGridColumnHeader">
<Setter Property="Margin" Value="5,0,0,0"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{ x:Type DataGridColumnHeader}">
<Border BorderThickness="2,2,2,0" CornerRadius="5,5,0,0">
<Border.Style>
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="White"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" Value="{x:Null}">
<Setter Property="BorderBrush" Value="Transparent"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<ContentPresenter HorizontalAlignment="Center" Margin="5"></ContentPresenter>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Style>
here's the eventsetter inside each window that contains datagrid:
<Style TargetType="DataGridRow">
<EventSetter Event="MouseDoubleClick" Handler="EditItem"/>
</Style>
It seems, that the grid uses the RowStyle from it's property later, than it has been set in window's resources. It will work, if you clear your RowStyle property in grid. Put this to the window's resources:
<Style TargetType="DataGrid" BasedOn="{StaticResource {x:Type DataGrid}}">
<Setter Property="RowStyle" Value="{x:Null}"/>
</Style>
For you can use the style set in app.xaml, you have to move the RowStyle from property to global(in app.xaml):
<Style TargetType="DataGrid">
....
<Setter Property="RowStyle" Value="{x:Null}"/>
...
</Style>
<Style TargetType="DataGridRow" BasedOn="{StaticResource {x:Type DataGridRow}}">
<Setter Property="Background" Value="Green"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="Foreground" Value="White"/>
</Style>
and in window's resources:
<Style TargetType="DataGridRow" BasedOn="{StaticResource {x:Type DataGridRow}}">
<EventSetter Event="MouseDoubleClick" Handler="PreviewMouseDown"/>
</Style>
I'm wondering how could I set my DataGrid Header Font size programatically, in case I would like to keep my font size in the database, because sometimes user might move aplication to a smaller monitor(1024x768) let's say and that simply he might edit his font size and everything is gonna be fine.
This is Style I am using right now to style my header:
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Background" Value="#0091EA"/>
<Setter Property="Opacity" Value="1"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="FontSize" Value="16"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="Height" Value="40"/>
</Style>
So how could I set this properties from code behind if I would like to
Could I do simply smth like this:
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Background" Value="#0091EA"/>
<Setter Property="Opacity" Value="1"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="FontSize" Value="{Binding FontSize}"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="Height" Value="40"/>
</Style>
I changed <Setter Property="FontSize" Value="16"/>
to
<Setter Property="FontSize" Value="{Binding FontSize}"/>
Value="{Binding FontSize}" //is new
so how can I add value to this FontSize to be something from my code behind?
You could for example add a double property to your window:
public partial class MainWindow : Window
{
public double MyFontSize { get; set; } = 30;
public MainWindow()
{
InitializeComponent();
}
}
<Window.Resources>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Background" Value="#0091EA"/>
<Setter Property="Opacity" Value="1"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="FontSize" Value="{Binding MyFontSize, RelativeSource={RelativeSource AncestorType=Window}}"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="Height" Value="40"/>
</Style
</Window.Resources>
Note that if you want to be able to change the value of the source property dynamically at runtime, the window class (or wherever you choose to implement the property) should implement the INotifyPropertyChanged event and raise change notifications.
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>
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" />