I have a weird problem,
My DatePicker shows in the middle some borders. I don't know where it comes from.
I changed every property of the DatePickerTextBox but it doesn't change anything.
Here is the XAML :
<Window.Resources>
<Style TargetType="{x:Type DatePicker}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DatePicker}">
<Border x:Name="MainBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" CornerRadius="5">
<Grid x:Name="PART_Root" Margin="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<DatePickerTextBox x:Name="PART_TextBox"
BorderThickness="0"
BorderBrush="Transparent"
HorizontalContentAlignment="Stretch"
Padding="{TemplateBinding Padding}"
VerticalContentAlignment="Center"
Visibility="Visible"
SelectionBrush="#FF6F5DF5"
FocusVisualStyle="{x:Null}"
Grid.Column="0" Margin="0,3,0,0">
<DatePickerTextBox.Style>
<Style>
<Setter Property="TextBox.BorderThickness" Value="0"/>
</Style>
</DatePickerTextBox.Style>
</DatePickerTextBox>
<Button x:Name="PART_Button" HorizontalAlignment="Right" Margin="0,0,0.333,0.333" Width="24">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Image Source="Resources/Images/down.png"></Image>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
<Popup x:Name="PART_Popup" StaysOpen="False" AllowsTransparency="True" Margin="0,0,0.333,0.333" />
<Label x:Name="lblLabel" Content="{TemplateBinding Uid}" HorizontalContentAlignment="Center" Foreground="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" BorderThickness="0" Padding="12,0" FontFamily="Poppins" VerticalContentAlignment="Stretch" Margin="6,-11,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsDropDownOpen" Value="True">
<Setter TargetName="MainBorder" Property="BorderBrush" Value="#FF6F5DF5"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="MainBorder" Property="BorderBrush" Value="#FF6F5DF5"/>
<Setter TargetName="PART_TextBox" Property="BorderThickness" Value="0"/>
<Setter Property = "BorderBrush" Value="{Binding ToYourBorder}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<DatePicker Margin="10,260,0,0" VerticalAlignment="Top" Uid="Date de naissance *" FontSize="12" Height="40" BorderThickness="0" HorizontalAlignment="Left" Width="181" FontFamily="Poppins" Background="#FFFEFEFE" BorderBrush="#FF9A9A9A" Foreground="#FF727272" />
And here how it seems :
And on hover, there is another thin border inside :
Any idea, please?
DatePickerTextBox has it's own Template where the border and the triggers for the border are defined/hardcoded.
You need to take care of those in the template of DatePickerTextBox.
Change:
<DatePickerTextBox.Style>
<Style>
<Setter Property="TextBox.BorderThickness" Value="0"/>
</Style>
</DatePickerTextBox.Style>
To:
<DatePickerTextBox.Style>
<Style TargetType="{x:Type DatePickerTextBox}">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<TextBox x:Name="PART_TextBox" BorderThickness="0"
Text="{Binding Path=SelectedDate, RelativeSource={RelativeSource AncestorType={x:Type DatePicker}}}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DatePickerTextBox.Style>
And it should work.
For a complete Template see DOCS
Related
I am working on application and one requirement is to change the image of the button on mouse hover.
Below is my code for button,
<Grid Margin="0 20 0 0" Name="ButtonsGrid" Width="300">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button x:Name="AnswerButton" Style="{StaticResource hover2}" Grid.Column="0" VerticalAlignment="Center" HorizontalContentAlignment="Center" Width="60" Height="60" Background="Transparent" IsEnabled="False" Click="AnswerButton_OnClick" BorderBrush="Transparent" BorderThickness="0" >
<Image Source="/Training.Project.Demo;component/Images/Answer.PNG" Stretch="UniformToFill"/>
</Button>
And below is the style i am applying,
<Style x:Key="hover2" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center">
<ContentPresenter.Content>
<Border Name="border"
BorderThickness="0"
BorderBrush="Transparent"
Background="{TemplateBinding Background}">
<Image x:Name="ButtonImage1" Source="/Training.Project.Demo;component/Images/Answer.PNG" Height="17" Width="17" />
</Border>
</ContentPresenter.Content>
</ContentPresenter>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="Black" />
<Setter TargetName="ButtonImage1" Property="Source" Value="/Training.Project.Demo;component/Images/answer-hover.PNG" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I am not sure what wrong am i doing but the above code is not working.
Any help would be appreciated
Remove IsEnabled="True" and define the Border element in the ControlTemplate itself and not in a ContentPresenter:
<Style x:Key="hover2" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border"
BorderThickness="0"
BorderBrush="Transparent"
Background="{TemplateBinding Background}">
<Image x:Name="ButtonImage1" Source="/Training.Project.Demo;component/Images/Answer.PNG" Height="17" Width="17" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="Black" />
<Setter TargetName="border" Property="BorderThickness" Value="1" />
<Setter TargetName="ButtonImage1" Property="Source" Value="/Training.Project.Demo;component/Images/answer-hover.PNG" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
XAML:
<Button x:Name="AnswerButton" Style="{StaticResource hover2}" Grid.Column="0" VerticalAlignment="Center" HorizontalContentAlignment="Center" Width="60" Height="60" Background="Transparent" Click="AnswerButton_OnClick" BorderBrush="Transparent" BorderThickness="0" >
<Image Source="/Training.Project.Demo;component/Images/Answer.PNG" Stretch="UniformToFill"/>
</Button>
If you want a ContentPresenter, you should replace the its Content in the trigger:
<ControlTemplate TargetType="Button">
<Border Name="border"
BorderThickness="0"
BorderBrush="Transparent"
Background="{TemplateBinding Background}">
<ContentPresenter x:Name="cp" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="Black" />
<Setter TargetName="border" Property="BorderThickness" Value="1" />
<Setter TargetName="cp" Property="Content">
<Setter.Value>
<Image Source="/Training.Project.Demo;component/Images/answer-hover.PNG" Stretch="UniformToFill"/>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
The IsMouseOver property is never set to true if the Button is disabled.
Hello Im trying to override the default mouseover event on WPF.
I have managed to work that out, but now having a problem displaying any Text content
Style Setter:
<Style x:Key="MyButton" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Content" Value="Submit" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="Border" BorderThickness="0" BorderBrush="White" Background="#FF7AB800" Height="24" Margin="0,0,0.2,0" />
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True" >
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Heres my button code:
<Button x:Name="submitBtn" HorizontalAlignment="Left" Margin="402,296,0,0" VerticalAlignment="Top" Width="75" Foreground="Black" FontFamily="Calibri Light" FontSize="16" Style="{StaticResource MyButton}" Content="Submit"/>
You're missing the ContentPresenter. Also, I would recommend removing setting the content value from the style directly. You'd want to do this from within the control itself.
<Style x:Key="MyButton" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="Border"
BorderThickness="0"
BorderBrush="White"
Background="#FF7AB800"
Height="24"
Margin="0,0,0.2,0">
<ContentPresenter Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True"
Content="{TemplateBinding Content}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True" >
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Button x:Name="submitBtn"
HorizontalAlignment="Left"
Margin="402,296,0,0"
VerticalAlignment="Top"
Width="75"
Foreground="Black"
FontFamily="Calibri Light"
FontSize="16"
tyle="{StaticResource MyButton}"
Content="Submit"/>
First of all, you need to add x: type
<Style x:Key="MyButton" TargetType="x:Type Button">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Border Name="Border" BorderThickness="0" BorderBrush="White" Background="#FF7AB800" Height="24" Margin="0,0,0.2,0" />
<ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate TargetType="x:Type Button">
I want to create a style for button with different images inside. I try to do following:
<Style TargetType="Button"
x:Key="PaintButton">
<Setter Property="Width"
Value="40"></Setter>
<Setter Property="Height"
Value="40"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<Border CornerRadius="3"
BorderThickness="2"
BorderBrush="Green">
<Image Source="{TemplateBinding Button.Content}" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and try to use:
<Button Content="images/pen.png"
HorizontalAlignment="Left"
Style="{DynamicResource PaintButton}" />
but images is not shown. Why and how to do it correctly?
The "Image" is not a correct source for another Image.
Either use BitmapImage as Button's contents or use ContentPresenter in the template.
Option 1.
<Button Style="{StaticResource PaintButton}">
<BitmapImage UriSource="Back_Forward.png"/>
</Button>
Option 2.
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<Border CornerRadius="3"
BorderThickness="2"
BorderBrush="Green">
<ContentPresenter Content="{TemplateBinding Button.Content}" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
Please try this
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<StackPanel Orientation="Horizontal">
<Grid Height="30" Width="30" Background="{TemplateBinding Background}"/>
<TextBlock Text="{TemplateBinding Content}" TextAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand"/>
</Trigger>
</Style.Triggers>
</Style>
<Button Name="btnPrintCard" Margin="2" Content="Print Card">
<Button.Background>
<ImageBrush ImageSource="images/ic_print_black_48dp.png"/>
</Button.Background>
</Button>
My Simple code for styling a ListBox and its Items:
<Style x:Key="SelectorPanelListBoxStyle" TargetType="{x:Type ListBox}">
<Setter Property="Background" Value="{x:Null}"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Border.CornerRadius" Value="2"/>
<Setter Property="ItemTemplate" x:Name="MyItemTemplate">
<Setter.Value>
<DataTemplate >
<Border BorderBrush="White" BorderThickness="1" CornerRadius="5" OverridesDefaultStyle="True">
<Grid Height="57" Width="145">
<Label Content="{TemplateBinding Content}" />
<ContentControl Content="{Binding}" Foreground="White" />
</Grid>
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
Each of my Styles is stored as a resource library file in the resources section of my project, linked as "merged dictionaries" in a ResourceLibrary" master file, which is referenced by the App.xaml. That clearly is working because I already have many of these styles in use.
I use the styles in my views analogously to the following example:
<ListBox Style="{StaticResource SelectorPanelListBoxStyle}" ..../>
Unfortunately, The BorderBrush, BorderThickness, CornerRadius/etc only show up in the breadcrumbs editor in blend, and are NOT applied when style is actually used. Sometimes not even that. What am I doing wrong?
Thanks in advance!
I think you need to use a <ControlTemplate> instead of a <DataTemplate>. I would write your above style as:
<Style x:Key="SelectorPanelListBoxStyle" TargetType="{x:Type ListBox}">
<Setter Property="Background" Value="{x:Null}"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Border.CornerRadius" Value="2"/>
<Setter Property="ItemTemplate" x:Name="MyItemTemplate">
<Setter.Value>
<ControlTemplate>
<Border BorderBrush="White" BorderThickness="1" CornerRadius="5" OverridesDefaultStyle="True">
<Grid Height="57" Width="145">
<Label Content="{TemplateBinding Content}" />
<ContentControl Content="{Binding}" Foreground="White" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
One of my own ListBox styles is below in case it might help you:
<Style TargetType="{x:Type ListBox}">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="AllowDrop" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBox}">
<Border BorderThickness="0">
<ScrollViewer Margin="0">
<StackPanel Margin="0" IsItemsHost="True"/>
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<DataTemplate x:Key="GridViewTemplate">
<Border BorderBrush="LightBlue" BorderThickness="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" CornerRadius="0">
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<DockPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<TextBlock FontFamily="Segoe UI Light" FontSize="18" Text="{Binding PropFullName}" Margin="2,2,2,2" DockPanel.Dock="Top"/>
<TextBlock FontFamily="Segoe UI Light" FontSize="18" Text="{Binding PropTitle}" Margin="2,2,2,2" DockPanel.Dock="Top"/>
</DockPanel>
</Grid>
</Border>
</DataTemplate>
The DataTemplate is then set as follows:
<ListBox.ItemTemplate>
<StaticResource ResourceKey="GridViewTemplate"/>
</ListBox.ItemTemplate>
EDIT 1:
<DataTemplate x:Key="MyListBoxTemplate">
<Border BorderBrush="White" BorderThickness="1" CornerRadius="5" OverridesDefaultStyle="True">
<Grid Height="57" Width="145">
<Label Content="{TemplateBinding Content}" />
<ContentControl Content="{Binding}" Foreground="White" />
</Grid>
</Border>
</DateTemplate>
<Style TargetType="{x:Type ListBox}">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="AllowDrop" Value="True"/>
<Setter Property="ItemTemplate">
<Setter.Value>
<StaticResource ResourceKey="MyListBoxItemTemplate"
</Setter.Value>
</Setter>
</Style>
How can I create tabs (in XAML) at the bottom of a LayoutDocument in AvalonDock 2.0, like the Code and Design tabs in Visual Studio? (without using a TabControl, of course)
I'd like to end up with tabs at the top, one per document, but then within each document, be able to have multiple "views," with one tab each, at the bottom of the window.
So, you might have "page.htm" as one document, appearing on a tab at the top. Then "source" and "design" as two tabs at the bottom of the open/activated document.
You sould override the default style of the LayoutDocumentPaneControl and for this I'd suggest to take look at one of the provided theme.
Sample code (not tested):
<!--MyCustomDocumentPaneControlStyle-->
<Style x:Key="MyCustomDocumentPaneControlStyle" TargetType="{x:Type avalonDockControls:LayoutDocumentPaneControl}">
<Setter Property="TabStripPlacement" Value="Bottom"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type avalonDockControls:LayoutDocumentPaneControl}">
<Grid ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!--Following border is required to catch mouse events-->
<Border Background="Transparent" Grid.RowSpan="2"/>
<Grid Panel.ZIndex="1" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<avalonDockControls:DocumentPaneTabPanel x:Name="HeaderPanel" Grid.Column="0" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1"/>
<avalonDockControls:DropDownButton
x:Name="MenuDropDownButton"
Style="{StaticResource {x:Static ToolBar.ToggleButtonStyleKey}}"
Focusable="False"
Grid.Column="1">
<avalonDockControls:DropDownButton.DropDownContextMenu>
<avalonDockControls:ContextMenuEx
ItemsSource="{Binding Model.ChildrenSorted, RelativeSource={RelativeSource TemplatedParent}}">
<avalonDockControls:ContextMenuEx.ItemContainerStyle>
<Style TargetType="{x:Type avalonDockControls:MenuItemEx}" BasedOn="{StaticResource {x:Type MenuItem}}">
<Setter Property="HeaderTemplate" Value="{Binding Path=Root.Manager.DocumentPaneMenuItemHeaderTemplate}"/>
<Setter Property="HeaderTemplateSelector" Value="{Binding Path=Root.Manager.DocumentPaneMenuItemHeaderTemplateSelector}"/>
<Setter Property="IconTemplate" Value="{Binding Path=Root.Manager.IconContentTemplate}"/>
<Setter Property="IconTemplateSelector" Value="{Binding Path=Root.Manager.IconContentTemplateSelector}"/>
<Setter Property="Command" Value="{Binding Path=., Converter={StaticResource ActivateCommandLayoutItemFromLayoutModelConverter}}"/>
</Style>
</avalonDockControls:ContextMenuEx.ItemContainerStyle>
</avalonDockControls:ContextMenuEx>
</avalonDockControls:DropDownButton.DropDownContextMenu>
<Image Source="/AvalonDock;component/Images/PinDocMenu.png"/>
</avalonDockControls:DropDownButton>
</Grid>
<Border x:Name="ContentPanel"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Grid.Column="0"
KeyboardNavigation.DirectionalNavigation="Contained"
Grid.Row="0"
KeyboardNavigation.TabIndex="2"
KeyboardNavigation.TabNavigation="Cycle">
<ContentPresenter x:Name="PART_SelectedContentHost"
ContentSource="SelectedContent"
Margin="{TemplateBinding Padding}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Model.ChildrenCount}" Value="0">
<Setter Property="Visibility" Value="Collapsed" TargetName="MenuDropDownButton" />
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Visibility" Value="{Binding IsVisible, Converter={StaticResource BoolToVisibilityConverter}}"/>
<Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}"/>
<Setter Property="ToolTip" Value="{Binding ToolTip}"/>
</Style>
</Setter.Value>
</Setter>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<avalonDockControls:LayoutDocumentTabItem Model="{Binding}"/>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<avalonDockControls:LayoutDocumentControl Model="{Binding}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
As you have the new style just plug it using the DocumentPaneControlStyle property of the DockingManager:
<ad:DockingManager DocumentPaneControlStyle="{StaticResource MyCustomDocumentPaneControlStyle}">
...
</ad:DockingManager>
Ado