DataGrid Scrollbar issue

kaanthi — Fri, 09 Jan 2009 07:37:28 GMT

Hi All,

I placed a custom usercontrol in a DataGridTemplateColumn. Here is the code of my user control. Here Percent Value is Dependency Property.

here is oue user control code:

StatusBar.xaml.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace vinControls
{
    public partial class StatusBar : UserControl
    {
        # region MemberVariables
        private bool _hasErrors;
        private string _error;
        //private double _percentValue;
        private Brush _fillColorBrush = new SolidColorBrush(Colors.Red);
        private Brush nonFillColorBrush = new SolidColorBrush(Colors.White);
        private double _width;
        private double _height;
        private Brush _foreground = new SolidColorBrush(Colors.Black);
        //private Brush _borderBrush;

        /// <summary>
        /// Property to set the Error existence
        /// </summary>
        public bool HasErrors
        {
            get { return _hasErrors; }
            set { _hasErrors = value; }
        }
        /// <summary>
        ///  property to set the Error message
        /// </summary>
        public string Error
        {
            get { return _error; }
            set { _error = value; }
        }

        /// <summary>
        /// Property to set the Percentage 
        /// </summary>
        //public double PercentValue
        //{
        //    get { return _percentValue; }
        //    set
        //    {
        //        _percentValue = value;
        //    }
        //}
        #region PercentValue

        /// <summary> 
        /// Gets or sets the PercentValue 
        /// </summary> 
        //public double PercentValue
        //{

        //    get { return (double)GetValue(PercentValueProperty); }
        //    set
        //    {

        //        SetValue(PercentValueProperty, value);
        //    }
        //}
         public double PercentValue
        {

            get { return (double)GetValue(PercentValueProperty); }
            set
            {

                SetValue(PercentValueProperty, value);
            }
        }


        /// <summary> 
        /// Identifies the PercentValue dependency property.
        /// </summary> 
        public static DependencyProperty PercentValueProperty =
                        DependencyProperty.Register(
                                "PercentValue",
                                typeof(double),
                                typeof(StatusBar),
                                new PropertyMetadata((System.Windows.PropertyChangedCallback)OnValueChanged)
            );

        private static void OnValueChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
        {
            ((StatusBar)o).SetValue(PercentValueProperty, ((double)e.NewValue));
        }



        #endregion
        /// <summary>
        /// Property to set the filling color
        /// </summary>
        public Brush FillColorBrush
        {
            get { return _fillColorBrush; }
            set { _fillColorBrush = value; }
        }
        /// <summary>
        /// property to set the non filling color
        /// </summary>
        public Brush NonFillColorBrush
        {
            get { return nonFillColorBrush; }
            set { nonFillColorBrush = value; }
        }
        /// <summary>
        /// property to set the width of the control
        /// </summary>
        public new double Width
        {
            get { return _width; }
            set { _width = value; }
        }
        /// <summary>
        /// propert to set the height of the control
        /// </summary>
        public new double Height
        {
            get { return _height; }
            set { _height = value; }
        }
        /// <summary>
        /// property to set the color of 
        /// the text to be displayed
        /// on the control
        /// </summary>
        public new Brush Foreground
        {
            get { return _foreground; }
            set { _foreground = value; }
        }
        /// <summary>
        /// property to set the border color of the control
        /// </summary>
        public new Brush BorderBrush
        {
            get { return base.BorderBrush; }
            set { base.BorderBrush = value; }
        }
        # endregion


        public StatusBar()
        {
            InitializeComponent();
        }

        private   void barContainer_Loaded(object sender, RoutedEventArgs e)
        {
            try
            {
                Canvas mainCanvas = sender as Canvas;
                //StatusBar sb = new StatusBar();
                //setting default values of the properties
                if (Width == 0)
                    Width = 100.0;
                if (Height == 0)
                    Height = 15;
                if (BorderBrush == null)
                    BorderBrush = new SolidColorBrush(Colors.Red);

                if (mainCanvas != null)
                {
                    //Checking for the condition 0<=PercentValue<=100)
                    if (PercentValue >= 0 && PercentValue <= 100)
                    {
                        //Border for the status bar
                        Border controlBorder = new Border();
                        controlBorder.BorderBrush = BorderBrush;
                        controlBorder.Width = Width + 1;
                        controlBorder.Height = Height;
                        controlBorder.BorderThickness = new Thickness(1, 1, 1, 1);
                        controlBorder.SetValue(Canvas.TopProperty, 4.0);

                        //Filled part of the status bar
                        Rectangle statusRectangle = new Rectangle();
                        statusRectangle.Height = Height;
                        statusRectangle.Width = Width + 1;
                        statusRectangle.Fill = NonFillColorBrush;
                        statusRectangle.SetValue(Canvas.TopProperty, 4.0);                                                

                        TextBlock percentDisplay = new TextBlock();
                        percentDisplay.Text = float.Parse(PercentValue.ToString()) + "%";
                        percentDisplay.Height = Height;
                        percentDisplay.Width = Width + 1;
                        percentDisplay.Opacity = 2;
                        percentDisplay.FontSize = 10;
                        percentDisplay.TextAlignment = TextAlignment.Center;
                        percentDisplay.HorizontalAlignment = HorizontalAlignment.Center;
                        percentDisplay.Foreground = Foreground;
                        percentDisplay.SetValue(Canvas.TopProperty, 4.0);

                        //Displaying the PercentValue on the status bar
                        Rectangle coloredArea = new Rectangle();
                        coloredArea.Fill = FillColorBrush;
                        coloredArea.HorizontalAlignment = HorizontalAlignment.Center;
                        coloredArea.VerticalAlignment = VerticalAlignment.Center;
                        coloredArea.Height = Height;                        
                        coloredArea.Width = Convert.ToDouble((Width * PercentValue) / 100);                        
                        coloredArea.SetValue(Canvas.TopProperty, 4.0);                        

                        mainCanvas.Children.Add(statusRectangle);
                        mainCanvas.Children.Add(coloredArea);
                        mainCanvas.Children.Add(percentDisplay);
                        mainCanvas.Children.Add(controlBorder);
                    }
                    else
                    {
                        //if PercentValue doesn't fall with in the range
                        //the follwing textblock will be displayed                        
                        throw new Exception("Percent should be 0 to 100");
                    }
                }
            }
            catch (Exception ex)
            {
                HasErrors = true;
                Error = ex.Message;
            }


        }
    }
}

StatusBar.xaml:
"vinControls.StatusBar"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    >
    "LayoutRoot" Background="White">
          "barContainer" >

This is the application where i have used my user control.when the DataGrid loaded for the first time everything is working fine.

 But when scrolling  up and down PercentValue is not Binding with the correct values.While double clicking on the datagridcell

again its is binding to correct value.

 <UserControl xmlns:my="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data" x:Class="controlTest.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:myControls="clr-namespace:myControls;assembly=myControls"
xmlns:local="clr-namespace:controlTest;assembly=controlTest"
> <Grid x:Name="LayoutRoot" Background="White" > 
<my:DataGrid x:Name="dgProperty" ItemsSource="Properties" Height="200" Width="1100" AutoGenerateColumns="False">
<my:DataGrid.Columns>
<my:DataGridTextColumn Header="Dimensions" Width="100" Binding="{Binding Dimensions}"></my:DataGridTextColumn>
<my:DataGridTextColumn Header="Total Units" Width="100" Binding="{Binding Totalunits}"></my:DataGridTextColumn> <my:DataGridTextColumn Header="Available Units" Width="100" Binding="{Binding Availableunits}"></my:DataGridTextColumn> 
<my:DataGridTextColumn Header="Occupied Units" Width="100" Binding="{Binding Occupiedunits}"></my:DataGridTextColumn>
 
 <my:DataGridTemplateColumn Header="Percent of Total" Width="150" SortMemberPath="Availableunits">
<my:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Canvas>
<myControls:StatusBar Height="15" Width="100" PercentValue="{Binding Availableunits,Mode=OneWay}" />
</Canvas>
</DataTemplate>
</my:DataGridTemplateColumn.CellTemplate>
</my:DataGridTemplateColumn>
 
 </my:DataGrid.Columns>
</my:DataGrid>
 
 </Grid></UserControl>
 
 Can you help me wth that. Thanks alot
 
-kaanthi

Silverlight Controls and Silverlight Toolkit

DataGrid Scrollbar issue