I am trying to load an image in WPF XAML but it is getting truncated from the right.
Here is the style i used:
<Style x:Key="PhotoStyle" TargetType="Image">
<Setter Property="Height" Value="60" />
<Setter Property="Width" Value="60" />
<Setter Property="Stretch" Value="Fill" />
<Setter Property="StretchDirection" Value="Both" />
</Style>
I tried various combinations of " Stretch" and "StretchDirection" but no luck.
Please help!
Thanks in advance!
The following style actually worked:
<Style x:Key="PhotoStyle" TargetType="Image">
<Setter Property="Height" Value="60" />
<Setter Property="Width" Value="60" />
<Setter Property="Stretch" Value="Fill" />
<Setter Property="StretchDirection" Value="Both" />
</Style>
I detected a code in my huge project where this style was being overridden.
Thank you guys for your precious time!!
Related
I don't know if I am just not understanding right. I am trying to make 2 different button styles for my application: BlueOnWhiteButton and WhiteOnBlueButton.
Both these buttons should be identical, but the foreground and backgrounds are reversed. So far, oh so simple.
Here is the catch: I need my buttons to have rounded corners. This simple requirement doesn't seem to be so simple after all. Also there maybe a little border of a different color on both versions.
Using some things I found on google and stack, I came up with this style for the first one, and it looked promising:
<Style x:Key="WhiteOnBlueButton"
TargetType="Button">
<Setter Property="Background" Value="{StaticResource MainBlue}" />
<Setter Property="Foreground" Value="White" />
<Setter Property="FontWeight" Value="bold" />
<Style.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="5" />
<Setter Property="BorderThickness" Value="2" />
<Setter Property="BorderBrush" Value="{StaticResource LightBlue}" />
</Style>
</Style.Resources>
</Style>
So far so good, my button looks how I want it. But then, when I try to make a second style underneath, I get an error at runtime because of the Style.Resources redefine. I'll save you the code block, figure the same with a different name and reversed colors.
I am trying to keep the use of the style as simple as possible, I have tried versions with templates, but it made the style a lot more complicated, and I even lost the button text...
What I would like to have is something like this:
<Style x:Key="RoundedButtonCornersNoBorder" TargetType="Border">
<Setter Property="CornerRadius" Value="4"/>
<Setter Property="BorderThickness" Value="0" />
</Style>
<Style x:Key="RoundedButtonCorners" TargetType="Border">
<Setter Property="CornerRadius" Value="4"/>
<Setter Property="BorderBrush" Value="{StaticResource LightBlue}" />
<Setter Property="BorderThickness" Value="2" />
</Style>
<Style x:Key="WhiteOnBlueButton"
TargetType="Button">
<Setter Property="Background" Value="{StaticResource MainBlue}" />
<Setter Property="Foreground" Value="White" />
<Setter Property="FontWeight" Value="bold" />
<!-- Somehow tell the borders should be taken from the style RoundedButtonCornersNoBorder-->
</Style>
<Style x:Key="BlueOnWhiteButton"
TargetType="Button">
<Setter Property="Background" Value="White" />
<Setter Property="Foreground" Value="{StaticResource MainBlue}" />
<Setter Property="FontWeight" Value="bold" />
<!-- Somehow tell the borders should be taken from the style RoundedButtonCorners-->
</Style>
Is there any way to code that without writing 300 lines of incomprehensible code?
The final goal is to apply the style by simply doing:
<Button
Style="{DynamicResource WhiteOnBlueButton}"
Content="CLICK ME!" />
You could move the Border Style in the Resources of a common base Style and derive the final Button Styles from the common base Style by means of the BasedOn property.
Do not set the BorderBrush in the Border Style, but either in the base or final Button Styles. The Border in the Button Template will pick it up from the Button via a TemplateBinding.
<Style x:Key="RoundedButtonCorners" TargetType="Button">
<Style.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="5"/>
<Setter Property="BorderThickness" Value="2"/>
</Style>
</Style.Resources>
<Setter Property="BorderBrush" Value="{StaticResource LightBlue}"/>
<Setter Property="FontWeight" Value="Bold" />
</Style>
<Style x:Key="WhiteOnBlueButton" TargetType="Button"
BasedOn="{StaticResource RoundedButtonCorners}">
<Setter Property="Background" Value="{StaticResource MainBlue}"/>
<Setter Property="Foreground" Value="White"/>
</Style>
<Style x:Key="BlueOnWhiteButton" TargetType="Button"
BasedOn="{StaticResource RoundedButtonCorners}">
<Setter Property="Background" Value="White"/>
<Setter Property="Foreground" Value="{StaticResource MainBlue}"/>
</Style>
Turns out we have a library that has a button exposing the border directly.
Final styles look like this:
<Style x:Key="WhiteOnBlueButton" TargetType="telerik:RadButton">
<Setter Property="Foreground" Value="White" />
<Setter Property="Background" Value="{StaticResource MainBlue}" />
<Setter Property="FontWeight" Value="bold" />
<Setter Property="CornerRadius" Value="5" />
<Setter Property="BorderBrush" Value="{StaticResource LightBlue}" />
<Setter Property="BorderThickness" Value="0" />
</Style>
<Style x:Key="BlueOnWhiteButton" TargetType="telerik:RadButton">
<Setter Property="Foreground" Value="{StaticResource MainBlue}" />
<Setter Property="Background" Value="White" />
<Setter Property="FontWeight" Value="bold" />
<Setter Property="CornerRadius" Value="5" />
<Setter Property="BorderBrush" Value="{StaticResource LightBlue}" />
<Setter Property="BorderThickness" Value="0" />
</Style>
And then building my button:
<telerik:RadButton
x:Name="xamlFullTextSearchButton"
Style="{StaticResource BlueOnWhiteButton}"
Grid.Column="2"
Grid.Row="0"
Content="CLICK ME"
CornerRadius="4"/>
With this, I don't even loose the clicking animation! It's perfect for what I need!
I snooped the desired property and I can change it in real-time:
But I don't know what exactly to set in the code.
When I edit the XAML like this:
<dock:DockingManager x:Name="dockManager" ...>
...
<dock:DockingManager.AnchorablePaneControlStyle>
<Style TargetType="{x:Type dock:LayoutAnchorablePaneControl}">
<Setter Property="BorderBrush" Value="DarkRed"/>
</Style>
</dock:DockingManager.AnchorablePaneControlStyle>
...
I get the border color changed but the rest of behavior is unusable:
I am not get the big picture yet for what you wanna get, but I think you have to edit the Theme.xaml file containing all AvalonDock Styles and have a look there at the following style:
<Style x:Key="AvalonDock_AnchorablePaneControlStyle" TargetType="{x:Type avalonDockControls:LayoutAnchorablePaneControl}">
<Setter Property="TabStripPlacement" Value="Bottom" />
<Setter Property="Padding" Value="0" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Foreground" Value="{Binding Model.Root.Manager.Foreground, RelativeSource={RelativeSource Self}}" />
<Setter Property="Background" Value="{DynamicResource AvalonDock_BaseColor8}" />
<Setter Property="Template">...
Then you can see that the Background property is binded to a DynamicResource. You have to change the value of AvalonDock_BaseColor8 resource accordingly to what you want to achieve.
I just converted a WPF project from .NET 3.5 to .NET 4.0.
I'm now using the .NET 4.0 DataGrid control rather than the WPF Toolkit DataGrid control. Functionally, everything is still working, but my styles are not applying as expected.
As you can see from the below screen captures, the alternating row formatting, padding, bold headings, etc. have stopped working.
Before (WPF Toolkit DataGrid)
After (.NET 4.0 DataGrid)
Here is my entire resource dictionary.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="DataGrid_ColumnHeaderStyle" TargetType="DataGridColumnHeader">
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="TextBlock.TextAlignment" Value="Center" />
<Setter Property="TextBlock.TextWrapping" Value="WrapWithOverflow" />
</Style>
<Style x:Key="DataGrid_CellStyle" TargetType="DataGridCell">
<Setter Property="Padding" Value="5,5,5,5" />
<Setter Property="TextBlock.TextAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DataGridCell">
<Border Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}">
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="DataGrid">
<Setter Property="ColumnHeaderStyle" Value="{StaticResource DataGrid_ColumnHeaderStyle}" />
<Setter Property="CellStyle" Value="{StaticResource DataGrid_CellStyle}" />
<Setter Property="Background" Value="White" />
<Setter Property="AlternatingRowBackground" Value="#F0F0F0" />
<Setter Property="VerticalGridLinesBrush" Value="LightGray" />
<Setter Property="HeadersVisibility" Value="Column" />
<Setter Property="SelectionMode" Value="Single" />
<Setter Property="SelectionUnit" Value="FullRow" />
<Setter Property="GridLinesVisibility" Value="Vertical" />
<Setter Property="AutoGenerateColumns" Value="False" />
<Setter Property="CanUserAddRows" Value="False" />
<Setter Property="CanUserDeleteRows" Value="False" />
<Setter Property="CanUserReorderColumns" Value="True" />
<Setter Property="CanUserResizeColumns" Value="True" />
<Setter Property="CanUserResizeRows" Value="False" />
<Setter Property="CanUserSortColumns" Value="True" />
<Setter Property="IsReadOnly" Value="True" />
<Setter Property="BorderBrush" Value="#DDDDDD" />
<Setter Property="HorizontalGridLinesBrush" Value="#DDDDDD" />
<Setter Property="VerticalGridLinesBrush" Value="#DDDDDD" />
</Style>
<Style x:Key="DataGrid_FixedStyle" TargetType="DataGrid" BasedOn="{StaticResource {x:Type DataGrid}}">
<Setter Property="CanUserReorderColumns" Value="False" />
<Setter Property="CanUserResizeColumns" Value="False" />
<Setter Property="CanUserResizeRows" Value="False" />
<Setter Property="CanUserSortColumns" Value="False" />
</Style>
</ResourceDictionary>
Here is a usage example (note that the style is set to "DataGrid_FixedStyle"):
<DataGrid
Style="{StaticResource DataGrid_FixedStyle}"
Grid.Column="0" Foreground="Black"
SelectedIndex="{Binding SelectedParticipantIndex, Mode=TwoWay}"
ItemsSource="{Binding Participants}">
<DataGrid.Columns>
<DataGridTextColumn Foreground="Black" Header="Participant" Binding="{Binding ParticipantId}" />
....
</DataGrid.Columns>
</DataGrid>
Note
To make sure the resource dictionary was really being used, I added the following setter to the <Style TargetType="DataGrid">...</Style>:
<Setter Property="FontSize" Value="24" />
As you can see from the screen capture below, the font size is cartoonishly large, so the style itself is definitely not being ignored. The problem is that many of the settings are not being used or not working for some reason.
Any theory on what might have caused my styles to break?
I think I found the culprit. In my App.xaml, I apply the "Aero" theme using the following declaration:
<ResourceDictionary
Source="/PresentationFramework.Aero,
Version=3.0.0.0,
Culture=neutral,
PublicKeyToken=31bf3856ad364e35,
ProcessorArchitecture=MSIL;component/themes/aero.normalcolor.xaml" />
After that, I include the resource dictionary that performs additional styling on the DataGrid using the following declaration:
<ResourceDictionary
Source="/CommonLibraryWpf;component/ResourceDictionaries/DataGridResourceDictionary.xaml" />
If I remove the Aero theme, the custom styling applies correctly (although it loses its Aero look since I'm running this on Windows XP). This problem definitely didn't occur in WPF 3.5, though. I'm not sure what exactly has changed between .NET 3.5 and 4.0 that would make this fail.
Now I just have to figure out how to get the Aero theme and the custom DataGrid styling to work at the same time :)
Edit
Please see this followup question.
I want to make a WPF datagrid look similar to the HTML grid in the following picture:
http://img443.imageshack.us/img443/2563/saltoftheearth.jpg
Does anyone know an easy way to do this ?
Regards,
S.
I managed to make it look like this ( http://img697.imageshack.us/img697/9417/failedwpfdatagridstylin.jpg ) using the following code in a resource file. However, it still does not look like the HTML counterpart ( http://img443.imageshack.us/img443/2563/saltoftheearth.jpg )....It has to many borders .... Any ideas on how to make this WPF datagrid look nicer ?
Value="12" />
<Style x:Key="DataGridCellStyle" TargetType="{x:Type my:DataGridCell}" >
<Setter Property="FontFamily"
Value="Tahoma" />
<Setter Property="FontSize"
Value="12" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="White"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="BorderBrush" Value="Transparent" />
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="DataGridStyle"
TargetType="{x:Type my:DataGrid}" >
<Setter Property="RowHeaderWidth"
Value="0" />
<Setter Property="HorizontalAlignment"
Value="Left" />
<Setter Property="SelectionUnit"
Value="Cell" />
<Setter Property="SelectionMode"
Value="Single" />
<Setter Property="AutoGenerateColumns"
Value="false" />
<Setter Property="CanUserAddRows"
Value="False" />
<Setter Property="CanUserDeleteRows"
Value="False" />
<Setter Property="CanUserResizeRows"
Value="False" />
<Setter Property="CanUserResizeColumns"
Value="False" />
<Setter Property="CanUserSortColumns"
Value="True" />
<Setter Property="CanUserReorderColumns"
Value="False" />
<Setter Property="IsReadOnly"
Value="True" />
</Style>
You can take a look here, at C# Corner, there are lots of useful tutorials there, and Im pretty sure you can find it, like this one.
I’m struggling a little bit with some XAML syntax I hope someone can advise on. I want to create an “Effect” type style resource which contains a DropShadowEffect definition which can be reused rather than always manually setting the properties. Here’s what I have:
<Style TargetType="DropShadowEffect" x:Name="DropShadowEffectStyle">
<Setter Property="BlurRadius" Value="5" />
<Setter Property="Direction" Value="315" />
<Setter Property="ShadowDepth" Value="2" />
<Setter Property="Opacity" Value="0.5" />
</Style>
<Style TargetType="TextBlock" x:Name="PageTabLabelStyle">
<Setter Property="FontSize" Value="16" />
<Setter Property="FontFamily" Value="Arial" />
<Setter Property="Foreground" Value="#EFEFEF" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Margin" Value="0, 10, 0, 10" />
<Setter Property="Effect" Value="{StaticResource DropShadowEffectStyle}" />
</Style>
This fails dismally each time it runs so I’m obviously missing something. I think it’s around the “Effect” property of the text block style expecting an “Effect” type rather than a “DopShadowEffect” type. Any ideas?
You cannot "style" an effect, because Style is a property of Control and an effect is not a Control.
What you really want to do is put the effect itself into the resource dictionary and use a StaticResource reference to point to it. Something like:
<UserControl.Resources>
<DropShadowEffect x:Key="dropShadow" BlurRadius="25" Direction="315" />
<Style TargetType="TextBlock" x:Name="PageTabLabelStyle">
<Setter Property="FontSize" Value="16" />
<Setter Property="FontFamily" Value="Arial" />
<Setter Property="Foreground" Value="#EFEFEF" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Margin" Value="0, 10, 0, 10" />
<Setter Property="Effect" Value="{StaticResource dropShadow}" />
</Style>
</UserControl.Resources>