Any DataGrid theme?

Nov 28, 2009 at 4:57 PM

Hi,

Is there any plan on releasing the DataGrid theme?

Dec 7, 2009 at 4:21 PM

I second this, I've tried a few times taking the original silverlight themes and fixing the errors but I end up with the control not being themed or the control not showing at all.

Support for the calendar, datepicker and datagrid would be great.

Dec 21, 2009 at 10:19 AM

Use this link for help converting silverlight datagrid themes to wpf

http://msdn.microsoft.com/en-us/library/cc278066%28VS.95%29.aspx

 

Dec 21, 2009 at 1:50 PM

Hi Nobster,

Many thanks! Let me try.

Dec 22, 2009 at 1:47 PM
Edited Dec 23, 2009 at 1:38 PM

I have uploaded my current BubbleCreme.xaml which includes my attempts at converting the silverlight datagrid styles. I have not been successfull so far but it may help some one else

Two points of interest; In silverlight the root object of the DataGridRow is DataGridFrozenGrid which has not been added to the WPF toolkit for some reason. Looking at the generic xaml and at other sample styles, SelectiveScrollingGrid can be used as an alternative. SelectiveScrollingGrid is part of the primitives namespace (Microsoft.Windows.Controls.Primitives) in the WPFtookit assembly. Secondly the ItemsHost of the DataGrid in silverlight is the DataGridRowsPresenter, but all samples in WPF use a ScrollViewer as part of the ControlTemplate and a ScrollContentPresenter to host the content, not sure the reason for this difference.

You will see both implementations in the uploaded script, the ScrollViewer script is commented out. So far I have not been able to get the DataGridRow and DataGridCell styles to work even if I explicitly specifiy in the DataGrid style. e.g. <Setter Property="RowStyle" Value = "{StaticResource DataGridRowStyle}"/><Setter Property="CellStyle" Value="{StaticResource DataGridCellStyle}"/> I have also not been able to get the scrollbars to work correctly. If using the scrollviewer implementation using the following xaml with the vertical and horizontal scroll bars do make the bars appear correctly but they still do not actually scroll the data.Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" ViewportSize="{TemplateBinding ViewportHeight}"
Maximum="{TemplateBinding ScrollableHeight}"  Value="{Binding Path=VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"

This is the location of the xaml. http://rapidshare.com/files/324377885/BubbleCreme.xaml

 

EDIT 23/12: I've realised why the scrolling wasn't working. I had PART_VerticalScrollbar instead of PART_VerticalScrollBar and similar with the horizontal scroll bar. The PART names are case sensitive it seems. You also need to use the scrollviewer implementation rather then the DataGridRowsPresenter. I am making progress, hopefully should have a working styled DataGrid that I can upload by the end of today.

Dec 23, 2009 at 5:15 PM

I have uploaded my most recent BubbleCreme here http://rapidshare.com/files/324933616/BubbleCreme.xaml

This includes a fairly decent looking DataGrid. What's outstanding is as follows

------------------------------------------------------------------------------------------------------------------------

DataGridCell VisualStates not working


DataGridColumnHeader Some VisualStates not working


DataGridRowHeader Some VisualStates not working


Grippers on Headers aren't big enough.


Select All functionality not working

---------------------------------------------------------------------------------------------------------------------

 

Dec 24, 2009 at 12:05 PM

I have uploaded updated template for expression dark. Not happy with it yet but it looks ok, I'm sure someone else can do a better job. Some of the visual states are not working here either.

http://rapidshare.com/files/325297214/ExpressionDark2.xaml

Jan 1, 2010 at 2:54 AM

Any updates?

I am struggling in converting the Silverlight DataGrid style to WPF.

Jan 2, 2010 at 11:53 AM

I haven't looked at it in ages weitzhandler. I may have something next week. I wonder where rudi is though, its his site and he converted the themes originally.

Jan 2, 2010 at 7:08 PM

Can't wait, thanks for your response.

Jan 4, 2010 at 10:14 AM
Edited Jan 4, 2010 at 3:41 PM

So far I have datagrid support added to BubbleCreme, ExpressionDark and ExpressionLight (Simply copy from Expression Dark)There are still some visual state animations that are not working for some reason, If anyone can shed some light on this I would appreciate it. I think I will do twightblue next. Weitzhandler do you have a particular theme that you want datagrid added to.

 

EDIT: Twilight blue added http://rapidshare.com/files/330149490/TwilightBlue.xaml also check out http://rapidshare.com/files/330149567/Change_Silverlight_DataGrid_to_WPF.txt which explains what I'm doing.

EDIT UXMusings added http://rapidshare.com/files/330200626/UXMusingsGreen.xaml, Rough styles on the way. Please note that I had to play with the Scrollbar style in the theme as well as adding the datagrid support as the horizontal scrollbar was behaving like a vertical scrollbar.

EDIT: UxMusingsRough added http://rapidshare.com/files/330244219/UXMusingsRoughRed.xaml , I had the same problem with the scroll bar so be sure to copy that section as well.

Jan 4, 2010 at 3:44 PM

Updated Themes pack here  http://rapidshare.com/files/330242600/Skins.rar. This includes the calendar and datagrid styles. The datagrid styles are not complete but are a good start. I hope if people build on these themes that they will post the changes here so everyone can benefit.

 

Jan 4, 2010 at 9:28 PM

Thank you so much!

but why rapidshare?? rapidshare sux.
I am unable to download, this is the message I get: Unfortunately right now our servers are overloaded and we have no more download slots left for non-members. Of course you can also try again later.

Use http://www.mediafire.com/ million times nicer, more reliable, free, and more, and no, I don't work for them..

Jan 4, 2010 at 10:33 PM

I use rapidshare because I have a premium account with them. However here is mediafire link http://www.mediafire.com/file/zzzdnoonjqy/Skins.rar

Jan 4, 2010 at 11:23 PM

I love you!

Jan 5, 2010 at 12:26 AM

I am trying to see what's going on overthere, anyway there are references to an assembly called FutaTill which is not included in the package.
Could you please upload the entire project or give me a link to something?

Did you write it?

Man, I must tell you, you're good.

Jan 5, 2010 at 12:36 PM

The FutaTill reference is in there due to the CurrencyTextBox style. Remove the futatill namespace declaration and also the CurrencyTextBox style. Or just copy the datagrid and calendar styles from my modified themes into the original ones downloaded from this site and make sure the namespaces match.

Jan 6, 2010 at 4:11 PM
Edited Jan 6, 2010 at 4:12 PM

There has been a good few downloads of this, I'd be interested to hear what people think, or if anyones had any joy getting the visual states to work for selected item etc.

Jan 7, 2010 at 2:37 PM

I've had some success with the DataGridRow VisualStates by following the directions on this site http://blogs.msdn.com/vinsibal/archive/2008/11/04/wpf-vsm-and-datagrid-sample.aspx. Don't know why I need an extra class for the datagridrow visual states to  work when the visual states in the other styles do not require one. This is only working on the UX musings skins however.

Jan 8, 2010 at 2:49 PM
Edited Jan 8, 2010 at 3:04 PM

Finally gave up and resorted to triggers. Either i'm missing something or vsm does not work correctly with the DataGrid yet.

This works perfectly.

<ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
        <Trigger.EnterActions>
            <BeginStoryboard>
                       <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="PART_BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="1" />
                       </Storyboard>
           </BeginStoryboard>
          </Trigger.EnterActions>
                </Trigger>
                <Trigger Property="IsSelected" Value="true">
          <Trigger.EnterActions>
            <BeginStoryboard>
                      <Storyboard>
                           <DoubleAnimation Storyboard.TargetName="PART_BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To=".5" />
                      </Storyboard>
         </BeginStoryboard>
          </Trigger.EnterActions>
                </Trigger>
         </ControlTemplate.Triggers>

 

This does not.

<vsm:VisualStateManager.VisualStateGroups>
                            <vsm:VisualStateGroup x:Name="CommonStates">
                                <vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualTransition GeneratedDuration="0" />
                                </vsm:VisualStateGroup.Transitions>
                                <vsm:VisualState x:Name="Normal" />
                                <vsm:VisualState x:Name="NormalAlternatingRow">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="PART_BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="0" />
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="PART_BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="1" To=".25" />
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="NormalSelected">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="PART_BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To=".5" />
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="MouseOverSelected">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="PART_BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To=".5" />
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="UnfocusedSelected">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="PART_BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To=".15" />
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                        </vsm:VisualStateManager.VisualStateGroups>

 

 

EDIT: forgot the exit actions, Use this for bubble creme, place inside Controltemplate

<ControlTemplate.Triggers>
                <Trigger Property="IsSelected" Value="true">
          <Trigger.EnterActions>
            <BeginStoryboard>
                      <Storyboard>
                           <DoubleAnimation Storyboard.TargetName="PART_BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="1" />
                      </Storyboard>
         </BeginStoryboard>
          </Trigger.EnterActions>
                    <Trigger.ExitActions>
         <BeginStoryboard>
                       <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="PART_BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="0" />
                       </Storyboard>
           </BeginStoryboard>
                   </Trigger.ExitActions>
                </Trigger>
         </ControlTemplate.Triggers>

Jan 22, 2010 at 12:05 AM

Nobster, big thanks for the work on this.

Question: I'm using the ExpressionDark theme and I wanted to remove the horizontal and vertical lines. I was successful at removing the horizontal lines, but I can't seem to get rid of the vertical lines... I've spent quite awhile in the xaml and can't figure it out.... any advice or suggestions?

 

I've tried changing these values with no success:

<Setter Property="GridLinesVisibility" Value="None" />
<Setter Property="HorizontalGridLinesBrush" Value="Transparent" />
<Setter Property="IsTabStop" Value="True" />
<Setter Property="VerticalGridLinesBrush" Value="Black" />

Jan 22, 2010 at 10:08 AM

The GridLinesVisibility should be set to "None" like you have done but additionally you will need to comment out this line

<Rectangle Height="1" HorizontalAlignment="Stretch" x:Name="BottomGridLine" Grid.Column="1" Grid.Row="2" Fill="White" />

from the DataGridRow style.

 

While your at it add this to the control template for the DataGridRow as well for nice row select effect.

 

<ControlTemplate.Triggers>
                <Trigger Property="IsSelected" Value="true">
          <Trigger.EnterActions>
            <BeginStoryboard>
                      <Storyboard>
                              <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="SelectedRectangle" Storyboard.TargetProperty="(UIElement.Opacity)">
                                            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" />
                                        </DoubleAnimationUsingKeyFrames>

                      </Storyboard>
         </BeginStoryboard>
          </Trigger.EnterActions>
                    <Trigger.ExitActions>
         <BeginStoryboard>
                       <Storyboard>
                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="SelectedRectangle" Storyboard.TargetProperty="(UIElement.Opacity)">
                                            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                                        </DoubleAnimationUsingKeyFrames>

                       </Storyboard>
           </BeginStoryboard>
                   </Trigger.ExitActions>
                </Trigger>
         </ControlTemplate.Triggers>

Jan 22, 2010 at 5:20 PM

Cheers Nobster, thanks for the fast reply.... that line you suggested is how I got rid of the horizontal lines, but I still have these blasted white dashed vertical lines running down for each column that I can't seem to find. :-(

 

Awesome row select effect... I put my own in, but I like yours much better so I got it in.

Jan 22, 2010 at 5:42 PM

I'll take another look at it this evening but setting GridLinesVisibility to None in the DataGrid style and commenting out the BottomGridLine rectangle in the DataGridRow style  should have removed both of the grid lines.

Jan 22, 2010 at 6:27 PM

Thanks mate...

I went back and restored the file to your original format and put in just your changes... just in case I inadvertently changed something causing my problem, but the lines are still there. It'll be interesting to see what you find out... thanks for you time.

 

Jan 22, 2010 at 10:27 PM

Try this http://www.mediafire.com/file/d5ngimtlqvm/ExpressionDark2.xaml

I only changed the two things and it works for me, so my only guess is there is something different elsewhere in the skin. Maybe I changed something since the first upload, anyway give this a go. Also might sound silly, but make sure your not setting the datagrid GridLinesVisibility property in your code or window xaml which is overriding the behaviour of the theme.

Jan 25, 2010 at 5:21 PM

Nobster, thanks for you time (and sorry for wasting your time)

Turned out it was my fault. After setting up some test projects with your suggestions it worked as expected. I swear I checked my grid xaml again and again to make sure I wasn't overriding something... but after a fresh night of sleep and clear mind... I found it this morning and sure enough I was overriding it. I'm going to blame it on VS2010 beta 2 lol.

Thanks again!

 

Jan 25, 2010 at 10:02 PM

No problem, glad to help

Jan 31, 2010 at 8:19 PM
Edited Jan 31, 2010 at 8:20 PM

Hi Nobster,

thank you for this excellent piece of work!

I noticed that the DataGrid doesn't have a trigger that changes the background color of the selected row.

I added such a trigger in the controls:DataGridCell ControlTemplate using the SelectedBackgroundBrush as trigger color. This works fine but the black foreground color is hardly readable on top of the SelectedBackgroundBrush.

My question is: How (or where) can I also trigger the foreground color so that the font text in the selected row becomes black? controls:DataGridCell does not have a property for "foreground". 

Thanks in advance!

Feb 1, 2010 at 2:38 PM

Do you mean row select effect or current editing cell effect as the file above at http://www.mediafire.com/file/d5ngimtlqvm/ExpressionDark2.xaml should have the triggers in place for a nice row select effect and also the foreground color switch.

The trigger for the row select is on the DataGridRow rather then the DataGridCell.

To be honest by only glancing at the theme I'm not sure how the foreground color switch is actually achieved. Its something do with that fact that the DataGridCell inherits from ContentControl, anyway it works.

Feb 2, 2010 at 12:09 AM
Edited Feb 2, 2010 at 12:31 AM

Thanks, I got it to work.

Today I found a nasty bug (which many themes seem to have):

If you databind a boolen value to a checkbox, the checkbox is never checked initially. Instead one has to click twice on the checkbox to see the checked mark. This happens because the IsChecked storyboard in the theme only triggers if the IsChecked property changes from false to true which doesn't happen when databinding.

There is an easy fix for this though: Just invert the trigger by triggering on IsChecked Value="true" and switching the enter/exit actions!

Change

<!--<Trigger Property="IsChecked" Value="false">
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource CheckedTrue}" x:Name="CheckedTrue_BeginStoryboard</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource CheckedFalse}"/>
</Trigger.EnterActions>
</Trigger>--
<Trigger Property="IsChecked" Value="false">
	<Trigger.ExitActions>
		<BeginStoryboard Storyboard="{StaticResource CheckedTrue}" x:Name="CheckedTrue_BeginStoryboard"/>
	</Trigger.ExitActions>
	<Trigger.EnterActions>
		<BeginStoryboard Storyboard="{StaticResource CheckedFalse}"/>
	</Trigger.EnterActions>
</Trigger>

To:

<Trigger Property="IsChecked" Value="true">
	<Trigger.EnterActions>
		<BeginStoryboard Storyboard="{StaticResource CheckedTrue}" x:Name="CheckedTrue_BeginStoryboard"/>								
	</Trigger.EnterActions>
	<Trigger.ExitActions>
		<BeginStoryboard Storyboard="{StaticResource CheckedFalse}"/>
	</Trigger.ExitActions>
</Trigger>

This happens to radiobuttons, too! Just replace CheckedTrue with CheckedOn and CheckedFalse with CheckedOff there.

More information on http://wpf.codeplex.com/Thread/View.aspx?ThreadId=58152 and thanks to pspidey who fixed it.

 

Maybe you could add this fix to your solution, Nobster...

Feb 8, 2010 at 2:15 PM

Thanks for sharing DragothiC, rather then creating an additional trigger you could just set the initial value of the object effected by the storyboard.

For example if the CheckedTrue storyboard changed the opacity of a border to 1, then set this as the starting opacity of that border in the control template.

Saves creating two triggers if the storyboard animation was very simple.

Also I guess this wouldn't even be an issue if using VisualStates rather then triggers.

May 21, 2010 at 7:10 PM
Thank you so much for the DataGrid theme, Nobster. Could you please give me a favor by reupload the skins.rar included the fix for cell selecting and editing of DataGrid ? Beside that, when I apply TwilightBlue I see font of DataGrid become larger than pre-setting ( I set font size of DataGrid is 14 but it seems larger than my setting). Sorry for bother you.
May 24, 2010 at 9:34 AM
Edited May 24, 2010 at 9:35 AM

The download link is still active rfc_club, but I haven't done any additional work on the themes I'm afraid and unfortunately I'm tied up with other projects at the moment.

For the Twightlight blue

There's a few properties set by the style, including row height and font size but these should be overidden with your settings, so I'm not sure whats happening here.

Below is a section of the DataGrid style extracted from the theme file. If you can find this section in your file, maybe go through each of the Setter Properties to

see if one of them is causing the anomoly.

 <!--DataGrid-->
    <Style TargetType="controls:DataGrid">
        <Setter Property="RowBackground" Value="#FFFFFF" />
        <Setter Property="AlternatingRowBackground">
            <Setter.Value>
                <LinearGradientBrush EndPoint="1,1" StartPoint="0,0" SpreadMethod="Repeat" MappingMode="Absolute">
                    <GradientStop Color="#FFFFFF" Offset=".33" />
                    <GradientStop Color="{StaticResource SecondaryColor}" Offset="1" />
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="Foreground" Value="{StaticResource TextBrush}" />
        <Setter Property="Background" Value="{StaticResource WindowBackgroundBrush}" />
        <Setter Property="HeadersVisibility" Value="All" />
        <Setter Property="HorizontalScrollBarVisibility" Value="Auto" />
        <Setter Property="HorizontalGridLinesBrush" Value="{StaticResource SecondaryBrush}" />
        <Setter Property="VerticalScrollBarVisibility" Value="Auto" />
        <Setter Property="VerticalGridLinesBrush" Value="{StaticResource SecondaryBrush}" />
        <Setter Property="SelectionMode" Value="Extended" />
        <Setter Property="CanUserReorderColumns" Value="False" />
        <Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
        <Setter Property="RowHeight" Value = "30"/>
        <Setter Property="CanUserResizeColumns" Value="True" />
        <Setter Property="CanUserSortColumns" Value="True" />
        <Setter Property="AutoGenerateColumns" Value="True" />
        <Setter Property="RowDetailsVisibilityMode" Value="VisibleWhenSelected" />
        <Setter Property="BorderBrush">
            <Setter.Value>
                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1.65">
                    <GradientStop Color="{StaticResource PrimaryColor}" Offset=".25" />
                    <GradientStop Color="{StaticResource SecondaryColor}" Offset="1" />
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="DragIndicatorStyle">
            <Setter.Value>
                <Style TargetType="ContentControl">
                    <Setter Property="FontSize" Value="10.5" />
                    <Setter Property="FontWeight" Value="Bold" />
                    <Setter Property="Foreground" Value="#7FFFFFFF" />

Jun 20, 2010 at 9:49 AM

Anything new abut the theming issue with DataGrid for the .Net 4.0 release (inside VS2010)?

The WPF Toolkit stuff seems to work a bit different from the WPF release wersion.

Aug 17, 2010 at 8:47 PM
I put up a small project that has some DataGrid themes as found in the Silverlight Toolkit. http://datagridthemessl.codeplex.com/
Aug 23, 2010 at 11:19 AM
Edited Aug 24, 2010 at 9:10 AM

Hi, 

I'm using the DataGrid and it works great... just having having trouble aligning DataGridColumnHeader’s to Center…

Be grateful for any help…

btw -  i'm using the TwilghtBluetheme

Oct 11, 2010 at 10:45 AM

Hi,

How can I modify the colour of the separator on the column headers of the DataGrid???

Thanks in advance.

Nov 28, 2011 at 6:12 AM

Hi TWebster,

I used your code. I found some difficulties. Could you help me to fix it.

When I use combo box, check box in the datagrid,selected row backgroud color still unchanged even i move to another row. 

how can i fix this?

thanks,

thenndral.