[SELL] ★★★ DataGrid UI Plugin ★★★ ➜ Professional Looking DataGrid In Your Main Window

[stanf 43]

is there a way to make an object in the grid a clickable link?

[HelloInsomnia 1103]

is there a way to make an object in the grid a clickable link?

 

Just using this plugin it only checks for integers and boolean values (for checkboxes), so no.

 

But, if you use the XAML UI plugin as well then there might be a way to do it by writing a control template for the datagrid, but that can be fairly involved and you would likely have to change the control template if you ever wanted to modify the columns.

[drewness 26]

Does anyone else have the issue where they use the DataGrid Plugin with the XAML UI plugin and attach a datagrid to a XAML grid, then populate it - but whenever you check some boxes and scroll down, then scroll back up, the boxes have become unchecked? Any ideas for how to avoid that?

Edited January 10, 2018 by drewness

[HelloInsomnia 1103]

Does anyone else have the issue where they use the DataGrid Plugin with the XAML UI plugin and attach a datagrid to a XAML grid, then populate it - but whenever you check some boxes and scroll down, then scroll back up, the boxes have become unchecked? Any ideas for how to avoid that?

 

I did a quick test and they stayed checked for me. If you want to post your code I can try it.

[drewness 26]

I did a quick test and they stayed checked for me. If you want to post your code I can try it.

 

Thank you, I appreciate it!

 

I actually found the culprit - I was using a skinny checkmark in the checkbox column header, but I started it with a space to center it which caused the problem.

 

Using a thicker checkmark, ✔ resulted in not having to add space to center it, so all is well.

 

Thanks for offering to help!

[cob007 19]

 

I had to add a control template because what you see before with default buttons and other controls is the "chrome" and so in order to do any real customization's to things like the mouse over property you need to use your own control template so it will have a more "flat" look to the button since it won't have the default chrome on it now. But I added mouse over and also when you click it turns red you can change that to blue or whatever.

 

The margin will be off and possibly the width, height so I could work with it:

<Button Margin="0,0,29.418,18.316" Width="100" Height="40" Padding="-2,0,0,0" x:Name="START" BorderBrush="{x:Null}" BorderThickness="0" HorizontalAlignment="Right" VerticalAlignment="Bottom" >
            <StackPanel Orientation="Horizontal">
                <Image Source="http://imgur.com/Tg4je6b.png" Stretch="Uniform" Height="25" Width="25" Margin="4,3,10,3">
                    <Image.OpacityMask>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="Black" Offset="0"/>
                            <GradientStop Color="White" Offset="1"/>
                        </LinearGradientBrush>
                    </Image.OpacityMask>
                </Image>
                <TextBlock FontSize="16" Width="60" FontFamily="Segoe UI Bold " Foreground="#FF3F513C"  Margin="-19,8,0,12" Text="   START" RenderTransformOrigin="0.655,0.6"/>
            </StackPanel>
            <Button.Style>
                <Style TargetType="{x:Type Button}">
                    <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type Button}">
                                <Border x:Name="BORDER" Background="{TemplateBinding Background}">
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CommonStates">
                                            <VisualState x:Name="Normal"/>
                                            <VisualState x:Name="Pressed">
                                                <Storyboard>
                                                    <ColorAnimation Duration="0" Storyboard.TargetName="BORDER" Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" To="Red"/>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="MouseOver">
                                                <Storyboard>
                                                    <ColorAnimation Duration="0" Storyboard.TargetName="BORDER" Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" To="Blue"/>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Button.Style>
        </Button>

 

Instead of a regular background colour for button i decided to use a gradient button like this;

 

 <Button.Background>

                            <LinearGradientBrush  StartPoint="0,0" EndPoint="1,1">

                                <GradientStop Color="#FFD9EDFF" Offset="0"/>

                                <GradientStop Color="#FFC0DEFF" Offset="0.445"/>

                                <GradientStop Color="#FFAFD1F8" Offset="0.53"/>

                            </LinearGradientBrush>

                        </Button.Background>

 

 

However now mouseover is not working, i tried to look up online for colour animation and storyboard how to change colour on mouseover but could't find anything for the code below where I reckon the issue lies because now its not a solid colour anymore?

 

<ColorAnimation Duration="0" Storyboard.TargetName="BORDER" Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" To="LightGray"/>

[cob007 19]

Instead of a regular background colour for button i decided to use a gradient button like this;

 

 <Button.Background>

                            <LinearGradientBrush  StartPoint="0,0" EndPoint="1,1">

                                <GradientStop Color="#FFD9EDFF" Offset="0"/>

                                <GradientStop Color="#FFC0DEFF" Offset="0.445"/>

                                <GradientStop Color="#FFAFD1F8" Offset="0.53"/>

                            </LinearGradientBrush>

                        </Button.Background>

 

 

However now mouseover is not working, i tried to look up online for colour animation and storyboard how to change colour on mouseover but could't find anything for the code below where I reckon the issue lies because now its not a solid colour anymore?

 

<ColorAnimation Duration="0" Storyboard.TargetName="BORDER" Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" To="LightGray"/>

 

 

What im actually now trying to achieve is outer glow effect when the button is clicked,

So initially the button is a gradient button instead of regular bakground colour

 

When it is hovered or clicked it changes to outer glow the way article here shows, is it possible?

 

https://learnwpf.com/post/2006/03/06/How-do-I-change-an-items-appearance-on-mouseover-in-WPF.aspx

[cob007 19]

after going through some xaml tuts, from what i understand is;instead of solidbrushocolor we need to use lineargradientbrush as below? to change the hover state colour of button and when button is pressed

 

"BORDER" Storyboard. TargetPropety = (LinearGradientBrush.GradientStops)[0].(GradientStop.Color)

[cob007 19]

ok this has worked to change the gradent colour when pressed;

 

<ColorAnimation Storyboard.TargetName="BORDER" Storyboard.TargetProperty = "(Background).(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)"
                            From="Red" To="Orange" Duration="0:0:5"/>

[drewness 26]

I'm trying to use the data grid in a bot I'm working on but I'm hitting a snag that I've experienced in the past:

 

I have a context menu option that's supposed to pull a value from the datagrid at the selected index. However, when allowing sorting in the datagrid, the '$datagridUI selected index' seems to return the wrong data - it pulls from the wrong cell. It seems like it's updating the grid front-end when sorting, but the info behind it doesn't change - so it's returning the data that USED to be in that row before it was sorted by clicking a table header.

 

I've tried adding 'refresh datagrid' when the context menu item is clicked before trying to read the selected index, but no luck.

 

Has anyone else experienced this, and if so, did you find a workaround?

 

Thanks in advance!

[matimagallanes 0]

Still for sale?

[SaHiN 14]

how to make Datagrid  Is Read Only?

[awpramono 1]

how to make Datagrid  Is Read Only?

 

Vote+1