ATC Avalon Team (Closed) https://docs.microsoft.com/archive/blogs/atc_avalon_team/feed.xml Hi! We don't blog any more. For further assitant, please visit MSDN WPF Forums at https://forums.microsoft.com/MSDN/ShowForum.aspx?ForumID=119&SiteID=1. Wed, 17 Apr 2019 03:20:25 GMT en-US hourly 1 The blog is close down https://docs.microsoft.com/archive/blogs/atc_avalon_team/the-blog-is-close-down Wed, 21 Jun 2006 01:27:00 GMT https://blogs.msdn.microsoft.com/atc_avalon_team/2006/06/21/the-blog-is-close-down/ We will no longer keep this blog.

For information about WPF, you can find more in Kevin Moore's blog: https://blogs.msdn.com/okoboji/ 

Thanks,

ATC Avalon Team

 

]]> A Fancy StatusBar https://docs.microsoft.com/archive/blogs/atc_avalon_team/a-fancy-statusbar Thu, 25 May 2006 02:12:00 GMT https://blogs.msdn.microsoft.com/atc_avalon_team/2006/05/25/a-fancy-statusbar/ Download and try it! 

When moving Mouse over an item, the item jumps up until Mouse leaves. The key steps to achieve it are as follows. 

1.      Subclass StatusBarItem and add new property ImagePath. Therefore, we can pass image to StatusBarItem easily.

 

2.      Subclass StatusBar and override MouseLeave and MouseMove event. In MouseMove event handler, find current item according to mouse position, and then change each item’s position by changing Canvas.Top property. When Mouse Leave, restore each item to original position.

Declaimer: This posting is provided "AS IS" with no warranties, and confers no rights.

StatusBarExtension.zip

]]> Moral Event: Mountain Climbing https://docs.microsoft.com/archive/blogs/atc_avalon_team/moral-event-mountain-climbing Wed, 17 May 2006 01:22:00 GMT https://blogs.msdn.microsoft.com/atc_avalon_team/2006/05/17/moral-event-mountain-climbing/ ]]> How to Create a Custom View https://docs.microsoft.com/archive/blogs/atc_avalon_team/how-to-create-a-custom-view Fri, 28 Apr 2006 02:49:00 GMT https://blogs.msdn.microsoft.com/atc_avalon_team/2006/04/28/how-to-create-a-custom-view/ One of the most powerful features of ListView is supporting custom views. If built-in views do not apply your scenarios, you can easily write your own. ListView will handle your views the same way with built-in views.

Creating a custom view is pretty simple. ListView control has done quiet a bit of work to make the implementation easy. Here are main steps to follow. Firstly, a class should be created and it should derive from ViewBase directly or indirectly. Then define the style of the view in a resource file. Finally link them together using ComponentResourceKey. In this blog I will show you how to create a custom view named ImageView. ImageView is used to display thumbnail of image files. The snapshot is listed below.

 Step 1. Define ImageView class

All you have to do is to subclass ViewBase.

public class ImageView : ViewBase

{

}

 Step 2. Define Style for ImageView

Two styles should be defined in a resource file. One is for ListView and the other is for ListViewItem. If you only want to do a little modification on the original one, you can use the following code. It will merge your style into its original style. The magic lies in the keyword “BasedOn”. It means your style definition is based on another style definition.

<Style TargetType="{x:Type ListView}" BasedOn="{StaticResource {x:Type ListBox}}">

NOTE: if you forget to define Template in styles, ListView will show nothing.

The following XAML code is digested from the style definitions for ImageView.

<Style TargetType="{x:Type ListView}" BasedOn="{StaticResource {x:Type ListBox}}">

  <Setter Property="BorderBrush" Value="Black"/>

  <Setter Property="BorderThickness" Value="0.5"/>

  <Setter Property="Template">

    <Setter.Value>

      <ControlTemplate>

        <Border Name="bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"

                Background="{TemplateBinding Background}" Margin="{TemplateBinding Margin}">

          <ScrollViewer Margin="{TemplateBinding Padding}">

            <WrapPanel ItemWidth="150" IsItemsHost="True" MinWidth="100"

                       Width="{Binding ActualWidth,RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}">

            </WrapPanel>

          </ScrollViewer>

        </Border>

      </ControlTemplate>

    </Setter.Value>

  </Setter>

</Style>

 

<Style TargetType='{x:Type ListViewItem}' BasedOn='{StaticResource {x:Type ListBoxItem}}'>

  <Setter Property='Padding' Value='3'/>

  <Setter Property='Margin' Value='5'/>

  <Setter Property='HorizontalContentAlignment' Value='Center'/>

   <Setter Property="ContentTemplate">

    <Setter.Value>

      <DataTemplate>

        <Border Background="White">

          <Image Margin="3" Source="{Binding FullName}"/>

        </Border>

      </DataTemplate>

    </Setter.Value>

  </Setter>

</Style>

 

Step 3. Link them together

The link method here is using ComponentResourceKey. Firstly give a key to each style defined before.

<Style x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type l:ImageView},ResourceId=ImageView}">

</Style>

 

<Style x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type l:ImageView},ResourceId=ImageViewItem}"}">

</Style>

Then set DefaltStyleKey and ItemContainerStyleKey in ImageView class.

public class ImageView : ViewBase

{

    protected override object DefaultStyleKey

    {

        get { return new ComponentResourceKey(GetType(), "ImageView"); }

    }

 

 

    protected override object ItemContainerDefaultStyleKey

    {

        get { return new ComponentResourceKey(GetType(), "ImageViewItem"); }

    }

 

}

 

Step 4. Use it in ListView

It is used like GridView.

<ListView>

  <ListView.View>

    <l:ImageView />

  </ListView.View>

</ListView>

 We’re done!

CustomView.zip

]]> How to display data from database? https://docs.microsoft.com/archive/blogs/atc_avalon_team/how-to-display-data-from-database Fri, 21 Apr 2006 05:12:00 GMT https://blogs.msdn.microsoft.com/atc_avalon_team/2006/04/21/how-to-display-data-from-database/ It is common for ListView to display data from database. In this blog, I will briefly introduce how to do this. To achieve this, we need to resolve two problems:

  1. Binding data table to ListView;
  2. Binding fields of data table to GridViewColumns.

Binding data table to ListView

How to bind data of a DataTable to ListView depend on how to use DataTable, but the basic rules are the same:

 

1.      If use DataTable directly, first set the DataTable to the ListView.DataContext. And then bind ListView.ItemsSource to ListView.DataContext. The following code is a simple sample:

string connString = "CONNECTION STRING";

SqlConnection conn = new SqlConnection(connString);

SqlDataAdapter adapter = new SqlDataAdapter();

adapter.SelectCommand = new SqlCommand("COMMAND", conn);

DataSet _dataSet = new DataSet();

adapter.Fill(_dataSet, "DATATABLE NAME");

DataTable table = _dataSet.Tables["DATATABLE NAME"];

Binding bind = new Binding();

listView.DataContext = table;

listView.SetBinding(ListView.ItemsSourceProperty, bind);

 

2.      If define wrapper classes for DataTable, wrapper classes should implement IEnumerable, so that instances of the wrapper classes can be directly assigned to ListView.ItemsSource. Fortunately, the Data Source Manger in Visual Studio 2005 can automatically create wrapper classes if you use it to manage your data source in your application.

3.      In some cases, you may need to dynamically add data rows into the source. For example, start a background thread to insert items into the data source. In this case, you can use ObservableCollection directly or create a wrapper class implementing INotifyCollectionChanged interface.

 

Binding fields of data table to GridViewColumns

  1. When defining data source for ListView in the first way mentioned above, use data field names in the DisplayMemberBinding directly, for example:

<GridViewColumn DisplayMemberBinding=”{Binding FIELDNAME}”/>

 

  1. If use wrapper class for data rows, just use property names in the wrapper class.

 In fact, it is straightforward to display DataTable with ListView. Two bindings are keys: one for ItemsSource of ListView and the other for fields in a row.

 

Declaimer: This posting is provided "AS IS" with no warranties, and confers no rights.

]]> Fixed-Width Column in ListView: A Column that cannot be resized https://docs.microsoft.com/archive/blogs/atc_avalon_team/fixed-width-column-in-listview-a-column-that-cannot-be-resized Mon, 10 Apr 2006 22:46:00 GMT https://blogs.msdn.microsoft.com/atc_avalon_team/2006/04/10/fixed-width-column-in-listview-a-column-that-cannot-be-resized/ A fixed-width column is a column that cannot be resized by mouse dragging or double-clicks. You can find instances in outlook. Currently two methods can be used to achieve the effect. One is to restyle GridViewColumnHeader to remove the gripper inside its Template. The other is to subclass GridViewColumn to restrict columns' width to a fixed size. Today's topic is about the second solution. The resulting column is a little bit different from the restyling one because there is still a gripper inside GridViewColumnHeader. When mouse is over the gap between columns, the cursor is still changed to the resizing cursor.

The main WPF elements we are going to cover in this session are GridViewColumn, dependency property definition, dependency property coercion.

 Step 1. Subclass GridViewColumn

The key in this step is to override WidthProperty's metadata to make it call CoerceWidth() to coerce its value when a new value is available.

public class FixedWidthColumn : GridViewColumn {

    static FixedWidthColumn() {

        WidthProperty.OverrideMetadata(typeof(FixedWidthColumn),

            new FrameworkPropertyMetadata(null, new CoerceValueCallback(OnCoerceWidth)));

}

 

private static object OnCoerceWidth(DependencyObject o, object baseValue) {

        return baseValue;

    }

}

 Step 2. Add a dependency property FixedWidth

The FixedWidth is used to set column's fixed width in spite of whatever the column's width is. The keys in this step are:

1.      Define a dependency property.

2.      When FixedWidth is changed, it calls CoerceValue() to coerce Width into the new value.

public double FixedWidth {

    get { return (double)GetValue(FixedWidthProperty); }

    set { SetValue(FixedWidthProperty, value); }

}

 

public static readonly DependencyProperty FixedWidthProperty =

    DependencyProperty.Register(

        "FixedWidth",

        typeof(double),          

        typeof(FixedWidthColumn),

        new FrameworkPropertyMetadata(double.NaN, new PropertyChangedCallback(OnFixedWidthChanged)));

 

private static void OnFixedWidthChanged(DependencyObject o, DependencyPropertyChangedEventArgs e) {

    FixedWidthColumn fwc = o as FixedWidthColumn;

    if (fwc != null)

        fwc.CoerceValue(WidthProperty);

}

Step 3. Rewrite CoerceWidth() to make it always return FixedWidth

Then the Width will always get the same value whatever value is set on Width.

private static object OnCoerceWidth(DependencyObject o, object baseValue) {

    FixedWidthColumn fwc = o as FixedWidthColumn;

    if (fwc != null)

        return fwc.FixedWidth;

    return baseValue;

}

Step 4. Use it in GridView

It is used like normal GridViewColumn.

<GridView xmlns:l="clr-namespace:FixedWidthColumnSample">

  <l:FixedWidthColumn Header="Coerce Fixed-Width Column"

                      DisplayMemberBinding="{Binding Name}"

                      FixedWidth="100"/>

</GridView>

 

 We're done!

 

This sample is based on the February CTP.

 

Declaimer: This posting is provided "AS IS" with no warranties, and confers no rights.

FixedWidthColumnSample.zip

]]> Other solutions to implement Alternate Background https://docs.microsoft.com/archive/blogs/atc_avalon_team/other-solutions-to-implement-alternate-background Mon, 27 Mar 2006 22:44:00 GMT https://blogs.msdn.microsoft.com/atc_avalon_team/2006/03/27/other-solutions-to-implement-alternate-background/ We have found three solutions to achieve alternative background scenarios so far. The first one is provided in the previous post. Now we will describe another two.

 

The second solution:

 Derive from ListView, override PrepareContainerForItemOverride method and return the container with the correct background. And in your xaml file, replace ListView with SubListView. When items change, call ListView.Items.Refresh method.

 

The code is as follows.

public class SubListView : ListView

    {

        protected override void PrepareContainerForItemOverride(DependencyObject element, object item)

        {

            base.PrepareContainerForItemOverride(element, item);

            if (View is GridView)

            {

                int index = ItemContainerGenerator.IndexFromContainer(element);

                ListViewItem lvi = element as ListViewItem;

                if (index % 2 == 0)

                {

                    lvi.Background = Brushes.LightBlue;

                }

                else

                {

                    lvi.Background = Brushes.LawnGreen;

                }

            }

        }

    }

 

 

The third solution:

Creat a StyleSelector for ListView.ItemContainerStyleSelector property, in which alternate styles. Reset the containerStyleSeletor property when collection changes.

 

The code is as follows.

public class ListViewItemStyleSelector : StyleSelector

    {

        public override Style SelectStyle(object item, DependencyObject container)

        {

            Style st = new Style();

            st.TargetType = typeof(ListViewItem);

            Setter backGroundSetter = new Setter();

            backGroundSetter.Property = ListViewItem.BackgroundProperty;

            ListView listView = ItemsControl.ItemsControlFromItemContainer(container) as ListView;

            int index = listView.ItemContainerGenerator.IndexFromContainer(container);

            if (index % 2 == 0)

            {

                backGroundSetter.Value = Brushes.LightBlue;

            }

            else

            {

                backGroundSetter.Value = Brushes.LawnGreen;

            }

            st.Setters.Add(backGroundSetter);

            return st;

        }

    }

 

]]> Alternate Background for ListViewItems https://docs.microsoft.com/archive/blogs/atc_avalon_team/alternate-background-for-listviewitems Thu, 23 Mar 2006 22:40:00 GMT https://blogs.msdn.microsoft.com/atc_avalon_team/2006/03/23/alternate-background-for-listviewitems/ This sample shows how to create a ListView control that uses a GridView to display a list of dates that are defined as DateTime objects. Items in this example have alternate background.

 

Key Step 1. Restyle ListViewItem, and set its Background by converter in the new style.

 

    <l:BackgroundConvertor x:Key="myConverter"/>

    <Style x:Key="myItemStyle" TargetType="{x:Type ListViewItem}">

      <Setter Property="Background">

        <Setter.Value>

          <Binding RelativeSource="{RelativeSource Self}" Converter="{StaticResource myConverter}"/>

        </Setter.Value>

      </Setter>

</Style>

 

<ListView Name="lv" ItemContainerStyle="{StaticResource myItemStyle}" />

 

Key Step 2. Implement BackgroundConvertor. We need the index of a ListViewItem to determine its background. int ItemContainerGenerator.IndexFromContainer(DependencyObject container) method can tell the index of a ListViewItem.

 

public sealed class BackgroundConvertor : IValueConverter

{

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)

    {

        ListViewItem item = (ListViewItem)value;

        ListView listView = ItemsControl.ItemsControlFromItemContainer(item) as ListView;

        // Get the index of a ListViewItem

        int index = listView.ItemContainerGenerator.IndexFromContainer(item);

 

        if (index % 2 == 0)

        {

            return Brushes.LightBlue;

        }

        else

        {

            return Brushes.White;

        }

    }

 

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)

    {

        throw new NotSupportedException();

    }

}

 

Key Step 3. We’ve almost finished the sample, and it works well in sorting/grouping. However, when one item is removed from the ListView, you may find two adjacent rows have the same background color. That's because the background of all the other items will not be updated automatically after removing/inserting. Therefore, some extra code is needed to refresh the items after the inserting/removing operation.

 

private void Remove(object sender, RoutedEventArgs e)

{

    _data.RemoveAt(3);

 

    // Must refresh all the items to update the background

    ICollectionView dataView =

      CollectionViewSource.GetDefaultView(lv.ItemsSource);

    dataView.Refresh();

}

 

This sample is based on the February CTP.

AlternateBackground.zip

]]> Team Moral Event: StarTrooper Laser Tag https://docs.microsoft.com/archive/blogs/atc_avalon_team/team-moral-event-startrooper-laser-tag Thu, 23 Mar 2006 20:52:00 GMT https://blogs.msdn.microsoft.com/atc_avalon_team/2006/03/23/team-moral-event-startrooper-laser-tag/ ]]> ListView with grouping (In GridView mode) https://docs.microsoft.com/archive/blogs/atc_avalon_team/listview-with-grouping-in-gridview-mode Wed, 15 Mar 2006 01:19:00 GMT https://blogs.msdn.microsoft.com/atc_avalon_team/2006/03/15/listview-with-grouping-in-gridview-mode/ ListView inherits GroupStyle from ItemsControl, so we can easily achieve grouping for GridView. The only thing we should provide is a GroupStyle. Besides, in order to collapse and expande a group, an Expander is added in the GroupStyle.

The number on the group header indicates the count of items in that group.

Declaimer: This posting is provided "AS IS" with no warranties, and confers no rights.

GridViewWithGrouping.xaml

]]>