Archive

Archive for the ‘Sivlerlight 3’ Category

Quick sample using EF, WCF RIA Services

January 11, 2010 12 comments

Here is a quick sample, I did using EF, RIA services which involves CRUD operations when there is many to many relationship between tables

you can download the sample database here and the sample here

you will be able to do

1. See all the playlists available, click on details to see the tracks in the playlist

2. Remove the tracks from the playlist and when save changes is clicked, save the changes

3. Add a new playlist

Binding DataField to a collection

December 10, 2009 Leave a comment

Here is something I found interesting browsing the silverlight forums. Assuming we are editing a object and we are in editmode in the DataForm

If we want to bind a property to a datafield we do something like

<dataFormToolkit:DataField Label=”FirstName”>
                            <TextBox Text=”{Binding FirstName, Mode=TwoWay}”/>
                        </dataFormToolkit:DataField>

buf if the property is a collection doing something similar wont work( the control will not be enabled)

<dataFormToolkit:DataField Label=”Skills”  >
                            <ListBox  ItemsSource=”{Binding Skills }”></ListBox>
                        </dataFormToolkit:DataField>

looks like we need to do something like this, specify the DataContext on the DataField

<dataFormToolkit:DataField Label=”Skills”  DataContext=”{Binding Skills}” >
                            <ListBox  ItemsSource=”{Binding }”></ListBox>
                        </dataFormToolkit:DataField>

Categories: Sivlerlight 3

Customizing datafield in SL3

December 10, 2009 1 comment

I was trying to answer a forum post regarding customizing  datafield and thought It might be better to post the sample here.

below is all the xaml

<UserControl xmlns:dataFormToolkit=”clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.DataForm.Toolkit” 
             x:Class=”SilverlightApplication3.MainPage”
    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation
    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml
             xmlns:ctl=”clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input”
 xmlns:sys=”clr-namespace:System;assembly=mscorlib”
 xmlns:vsm=”clr-namespace:System.Windows;assembly=System.Windows”
    xmlns:d=”http://schemas.microsoft.com/expression/blend/2008” xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006
    mc:Ignorable=”d” d:DesignWidth=”640″ d:DesignHeight=”480″>
    <UserControl.Resources>
        <Style x:Key=”requiredStyle” TargetType=”ctl:Label”>
            <Setter Property=”IsTabStop” Value=”False”/>
            <Setter Property=”Template”>
                <Setter.Value>
                    <ControlTemplate TargetType=”ctl:Label”>
                        <StackPanel Orientation=”Horizontal”>
                            <vsm:VisualStateManager.VisualStateGroups>
                                <vsm:VisualStateGroup x:Name=”CommonStates”>
                                    <vsm:VisualState x:Name=”Normal”/>
                                    <vsm:VisualState x:Name=”Disabled”/>
                                </vsm:VisualStateGroup>
                                <vsm:VisualStateGroup x:Name=”ValidationStates”>
                                    <vsm:VisualState x:Name=”Valid”/>
                                    <vsm:VisualState x:Name=”Invalid”>
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName=”ContentControl” Storyboard.TargetProperty=”Foreground” Duration=”0:0:1.5″>
                                                <DiscreteObjectKeyFrame KeyTime=”0″>
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <SolidColorBrush Color=”Red” />
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                                <vsm:VisualStateGroup x:Name=”RequiredStates”>
                                    <vsm:VisualState x:Name=”NotRequired”>
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName=”requiredControl” Storyboard.TargetProperty=”Opacity” Duration=”0:0:1.5″>
                                                <DiscreteObjectKeyFrame KeyTime=”0″ Value=”0″>                                               
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name=”Required”>
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName=”requiredControl” Storyboard.TargetProperty=”Opacity” Duration=”0:0:1.5″>
                                                <DiscreteObjectKeyFrame KeyTime=”0″ Value=”1″>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>                                                                      
                                </vsm:VisualStateGroup>
                            </vsm:VisualStateManager.VisualStateGroups>
                            <Border Background=”{TemplateBinding Background}” BorderBrush=”{TemplateBinding BorderBrush}” BorderThickness=”{TemplateBinding BorderThickness}” Padding=”{TemplateBinding Padding}” CornerRadius=”2″>
                                <StackPanel Orientation=”Horizontal”  HorizontalAlignment=”Left”>
                                    <TextBlock x:Name=”requiredControl” Text=”*” FontSize=”10″/>
                                    <ContentControl x:Name=”ContentControl” Foreground=”{TemplateBinding Foreground}” Content=”{TemplateBinding Content}” ContentTemplate=”{TemplateBinding ContentTemplate}” FontWeight=”{TemplateBinding FontWeight}” Cursor=”{TemplateBinding Cursor}” HorizontalAlignment=”{TemplateBinding HorizontalAlignment}” HorizontalContentAlignment=”{TemplateBinding HorizontalContentAlignment}” FontFamily=”{TemplateBinding FontFamily}” FontSize=”{TemplateBinding FontSize}” FontStretch=”{TemplateBinding FontStretch}” VerticalAlignment=”{TemplateBinding VerticalAlignment}” VerticalContentAlignment=”{TemplateBinding VerticalContentAlignment}” IsTabStop=”False” />
                                </StackPanel>
                            </Border>
                        </StackPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key=”datafieldStyle” TargetType=”dataFormToolkit:DataField”>
            <Setter Property=”LabelStyle”  Value=”{StaticResource requiredStyle}”/>
        </Style>
    </UserControl.Resources>
  <Grid x:Name=”LayoutRoot”>
       <dataFormToolkit:DataForm Width=”400″ Margin=”30″ Height=”200″  DataFieldStyle=”{StaticResource datafieldStyle}”   x:Name=”dataform1″></dataFormToolkit:DataForm>
    </Grid>
</UserControl>

you can download the code sample here

Categories: Silverlight, Sivlerlight 3

ListBox and scrolling

October 8, 2009 1 comment

When the listbox is bound to some data and when the data changes we may want to make the first item in the list visible.  That is not the default behaviour and ScrollIntoView(Item[0]) wont work. here is a way to reset the scrollposition

In the sample, I had the listbox’s  are bound to 200 items and when the button is clicked I set the items to 20. the listbox on the left shows the default behaviour , the listbox on the right  has the ScrollViewer position changed to show the first item  listbox scrolling
update: Looks like this method still has issues when the number of items changes from a very low number to  high number where the scrollbar appears and disappears as pointed out in this post. May be a bug?

update 2: Mog Liang (Microsoft Online Community Support) says “This is an known issue caused by ListBox virtualization. Currently, an workaround is replace VirtualizingStackPanel with StackPanel, however, this will drop the listbox performance.”

Here is the XAML and codebehind used in the sample

<Grid x:Name=”LayoutRoot” Margin=”5″>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            </Grid.ColumnDefinitions>
      <Button Content=”set to 20 items” Height=”28″ Width=”100″  HorizontalAlignment=”Right” Click=”Button_Click”/>
            <ListBox Grid.Column=”1″  Height=”200″ x:Name=”list1″ ItemsSource=”{Binding MyList}”/>
        <ListBox Grid.Column=”2″  Height=”200″ x:Name=”list2″ ItemsSource=”{Binding MyList}”/>
    </Grid>

 

public partial class MainPage : UserControl, INotifyPropertyChanged
    {
        public IEnumerable<string> MyList { get; set; }
        public MainPage()
        {
            InitializeComponent();
            MyList = Enumerable.Range(0, 200).Select(i => “Item..” + i.ToString()).ToList();
            this.DataContext = this;
           
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            MyList = Enumerable.Range(0, 20).Select(i => “Item..” + i.ToString()).ToList();
            NotifyPropertyChanged(“MyList”);
            ScrollViewer sv = GetChild<ScrollViewer>(list2);
            sv.ScrollToVerticalOffset(0);
        }

        public static T GetChild<T>(DependencyObject obj) where T : DependencyObject
        {
            DependencyObject child = null; for (Int32 i = 0; i < VisualTreeHelper.GetChildrenCount(obj); i++)
            {
                child = VisualTreeHelper.GetChild(obj, i);
                if (child != null && child.GetType() == typeof(T))
                {
                    break;
                }
                else if (child != null)
                {
                    child = GetChild<T>(child);
                    if (child != null && child.GetType() == typeof(T))
                    {
                        break;
                    }
                }
            }
            return child as T;
        }
        #region INotifyPropertyChanged Members

        public event PropertyChangedEventHandler PropertyChanged;
        public void NotifyPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        } 

       
        #endregion
    }

Categories: Sivlerlight 3

Telerik Silverlight RadGridView Issues

September 24, 2009 3 comments

I am new to Silverlight RadGridView control from (Q2 2009). I was trying to use a nested RadGridView in the RowDetailsTemplate like below.

Update: With the help of Vlad from Telerik, learned that there is a Service pack released which fixed issues 2 and 3, but scrolling seems to be still slow when compared to the regular DataGrid doing the samething and you see lot of flickering

I am having multiple issues.

<grid:RadGridView   x:Name=”RadGridView1″ ShowGroupPanel=”False”   IsReadOnly=”True”
                          RowIndicatorVisibility=”Collapsed”
                          AutoGenerateColumns=”False”  ColumnsWidthMode=”Fill”
                          RowDetailsVisibilityMode=”Visible”
                           CanUserFreezeColumns=”False” >
            <grid:RadGridView.Columns>
                …
            </grid:RadGridView.Columns>

            <grid:RadGridView.RowDetailsTemplate>
                <DataTemplate>
                    <Grid>
                        <grid:RadGridView  ShowColumnHeaders=”False” ShowGroupPanel=”False”
                                      ItemsSource=”{Binding ChildItems}”    IsReadOnly=”True” 
                                       Visibility=”Visible”
                          AutoGenerateColumns=”False”  ColumnsWidthMode=”Fill”
                          RowDetailsVisibilityMode=”Collapsed”
                           CanUserFreezeColumns=”False” >
                            <grid:RadGridView.Columns>
                                …
                            </grid:RadGridView.Columns>
                        </grid:RadGridView>
                    </Grid>
                </DataTemplate>
            </grid:RadGridView.RowDetailsTemplate>
        </grid:RadGridView>

1. With 10  rows of data. It is just not usable as scrolling takes long time. that is just for starters

2. I dont want to display any RowIndicator for the inner RadGridView. The property  “RowIndicatorVisibility” works correctly when set to “Collapsed” on the outer RadGridView when you add this property to the Inner RadGridView. you dont see any data in the Inner RadGridView

3. When the filter is applied, the inner RadGridView will not display any data

Tried to flatten the hierarchy but the filter functionality would be lost as I dont want to filter on the values of the InnerCollection and I could not find a way to tell dont include some values in the filter popup

If any one has any Ideas or workaround, please let me know

BTW,  the same scenario when using the DataGrid that comes with Silverlight, it seemed to work just fine, except for the ability to filter (out of the box)

Extended AutoCompleteBox sample updated to Silverlight 3

September 1, 2009 30 comments

A while back I had a sample that extends AutoCompleteBox which worked in Silverlight 2. Here is the sample upgraded to Silverlight 3. I did not add/remove anything functional. just fixed the errors that are caused by the changes in base class(AutoCompleteBox)

you can try a sample here and download the code here

Categories: Sivlerlight 3 Tags:

DataBinding in Nested Controls

August 27, 2009 7 comments

Databinding can get tricky in a hurry depending on the layout we have and the model we are binding to. Dan Wahlin suggests a way in this post

Here is another way without any code or additional classes.

DataContext is setup to be a instance of data, which has list of customers(having name and city as properties) and an array of strings for cities. we would like to display customers in datagrid and display list of Cities in ComboBox and select the appropriate city for the customer

namespace SilverlightApplication2
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            this.DataContext = new Data();            
        }
    }
    public class Data
    {
        public List<Customer> Customers { get; set; }
        public string[] Cities { get; set; }
        public Data()
        {
            Customers = new List<Customer>();
            for (int i = 0; i < 10; i++)
                Customers.Add(new Customer { Name=”Customer..” + i.ToString(), City=”City..”+i.ToString() });

            Cities = new string[10];
            for (int i = 0; i < 10; i++)
                Cities[i] = “City..” + i.ToString();

        }
    }

    public class Customer
    {
        public string Name { get; set; }
        public string City { get; set; }
    }
}

the UI is set up like this. just a DataGrid with DataGridTextColumn for Name of the customer and ComboxBox for cities in a  DataGridTemplateColumn

Added a ContentControl( could be any control) to Resources which will have the same datacontext as the Root (Page/UserControl)

The ComboBox’s ItemsSource is set as shows in Bold, setting the source to the Resource and the path to its DataContext (in this case it will point to object of type “Data”) which has a property Cities. SelectedItem of the ComboBox is set to City of the customer

<UserControl xmlns:data=”clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data”  x:Class=”SilverlightApplication2.MainPage”
    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation
    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml
    xmlns:d=”http://schemas.microsoft.com/expression/blend/2008
             xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006
    mc:Ignorable=”d” d:DesignWidth=”640″ d:DesignHeight=”480″>
    <UserControl.Resources>
        <ContentControl x:Key=”cc1″ ></ContentControl>
    </UserControl.Resources>
    <Grid x:Name=”LayoutRoot”>
        <data:DataGrid AutoGenerateColumns=”False”
                       ItemsSource=”{Binding Path=Customers}” Name=”datagrid1″>
            <data:DataGrid.Columns>
                <data:DataGridTextColumn Width=”150″ Header=”Name”  Binding=”{Binding Name}”/>
                <data:DataGridTemplateColumn Width=”150″ Header=”City”>
                    <data:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <ComboBox SelectedItem=”{Binding City}”
                                      ItemsSource=”{Binding Source={StaticResource cc1}, Path=DataContext.Cities}” ></ComboBox>
                        </DataTemplate>
                    </data:DataGridTemplateColumn.CellTemplate>
                </data:DataGridTemplateColumn>
            </data:DataGrid.Columns>
        </data:DataGrid>
    </Grid>
</UserControl>

Here is what it looks like.

nestedbindings

Categories: Sivlerlight 3
Follow

Get every new post delivered to your Inbox.