More about binding

Details
Written by: Stanko Milosev
Category: WPF
Hits: 4858

I just want to show one more examples of binding.

Beside binding of TreeView to which I already gave an example here, there is another possibility of TreeView binding.

For this example I don't need model, so my view model looks like this: 

public class ClassBinding
{
	public List<string> MyTest
	{
		get
		{
			List<string> pom = new List<string>();
			pom.Add("test");
			return pom;
		}
	}

	public ClassBinding MyContextTest
	{
	  get
	  {
		return new ClassBinding();
	  }
	}

}

My XAML for tree view binding looks like this: 

<Grid>
	<TreeView DataContext="{Binding Path=MyContextTest}" ItemsSource="{Binding MyTest}"/>
</Grid>

Notice line {Binding Path=MyContextTest} then notice that MyContextClass is property of the class ClassBinding.

Example project you can download from here.

This article I wrote with help of my colleague from ISE. 

Autofac another example

Details
Written by: Stanko Milosev
Category: WPF
Hits: 10241

So, idea was to have to listbox where one list box I will fill with data from MySQL, and in another with data from XML.

This is example is maybe not good, since I don't have model, I just wanted to play with autofac on a simplest possible way.

So here are my interfaces: 

public interface IMyTree
{
	List<string> Read(List<string> listMyElements);
}
public interface IReadMyTree
{
	List<string> ReadXml();
	List<string> ReadMySql();
}

Here is the class which will actually return 

public class DoMytree : IMyTree
{
	public List<string> Read(List<string> listMyElements)
	{
		return listMyElements;
	}
}

Note that this class basically does nothing, that is because I don't have model, so I couldn't pass list of elements, for example, because structure is not same as structure from mySql.

Now, here is example of ReadMySql method: 

public class MyReader : IReadMyTree
{
	private readonly IMyTree _output;
	public MyReader(IMyTree output)
	{
		this._output = output;
	}

	public List<string> ReadMySql()
	{
		string MyConString =
		"SERVER=server;" +
		"DATABASE=db;" +
		"UID=user;" +
		"PASSWORD=pass;Convert Zero Datetime=True";

		string sql = "select * from jos_categories";

		try
		{
			var connection = new MySqlConnection(MyConString);
			var cmdSel = new MySqlCommand(sql, connection);

			connection.Open();

			MySqlDataReader dataReader = cmdSel.ExecuteReader();

			var pom = new List<string>();

			while (dataReader.Read())
			{
				object bugId = dataReader["title"];
				pom.Add(bugId.ToString());
			}

			return _output.Read(pom);
		}
		catch (Exception e)
		{
			MessageBox.Show("Error: " + e);
		}
		return null;
	}	
}

Note line: return _output.Read(pom); little bit of nonsense I agree :) I just wanted to follow dependency injection... This example is just for learning, remember ;) 

 Interesting thing to notice are lines: 

var connection = new MySqlConnection(MyConString);
var cmdSel = new MySqlCommand(sql, connection);

connection.Open();

MySqlDataReader dataReader = cmdSel.ExecuteReader();

var pom = new List<string>();

while (dataReader.Read())
{
	object bugId = dataReader["title"];
	pom.Add(bugId.ToString());
}

Here you can see how to fill list of strings from mySql, example how to connect to mySql you find here.

Autofac registration: 

public class ReadMySqlTreeViewAutofacViewModel
{
	public static List<string> ReadMySql()
	{
		var scope = MainWindow.Container.BeginLifetimeScope();
		var writer = scope.Resolve<IReadMyTree>();
		return writer.ReadMySql();
	}
	
	public List<string> TreeMySqlViewModels { get; set; }
	
	public ReadMySqlTreeViewAutofacViewModel()
	{
		var builder = new ContainerBuilder();
		builder.RegisterType<MyReader>().As<IReadMyTree>();
		builder.RegisterType<DoMytree>().As<IMyTree>();
		MainWindow.Container = builder.Build();

		TreeMySqlViewModels = ReadMySql();
	}
}

XAML:

<Window x:Class="ReadXmlTreeViewAutofac.View.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:system="clr-namespace:System;assembly=mscorlib"
        xmlns:viewModel="clr-namespace:ReadXmlTreeViewAutofac.ViewModel"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <viewModel:TreeViewModel x:Key="TreeViewModel" />
        <viewModel:ReadMySqlTreeViewAutofacViewModel x:Key="ReadMySqlTreeViewAutofacViewModel" />
    </Window.Resources>
    <TabControl>
        <TabItem Header="Read from Xml">
            <Grid DataContext="{StaticResource TreeViewModel}" OverridesDefaultStyle="True">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <TreeView Grid.Row="0" Grid.Column="0" Name="TvXml" ItemsSource="{Binding Path=TreeXmlViewModels}"/>
            </Grid>
        </TabItem>
        <TabItem Header="Read from MySql">
            <Grid OverridesDefaultStyle="True" DataContext="{StaticResource ReadMySqlTreeViewAutofacViewModel}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <TreeView Grid.Row="0" Grid.Column="0" Name="TvMySql" ItemsSource="{Binding Path=TreeMySqlViewModels}"/>
            </Grid>
        </TabItem>        
    </TabControl>
</Window>

Things to notice in XAML are lines:

xmlns:viewModel="clr-namespace:ReadXmlTreeViewAutofac.ViewModel"

This is namespace which we will use, and lines:

<viewModel:TreeViewModel x:Key="TreeViewModel" />
<viewModel:ReadMySqlTreeViewAutofacViewModel x:Key="ReadMySqlTreeViewAutofacViewModel" />

These are classes which we will use to bind them with our trees, and finally tree binding:

<TreeView Grid.Row="0" Grid.Column="0" Name="TvXml" ItemsSource="{Binding Path=TreeXmlViewModels}"/>

Note that TreeXmlViewModels is property which I am registering it in autofac registration part, also note that I am preparing that property in line TreeXmlViewModels = ReadXml();

Example application you can download from here.

Github is here.

Resizable WPF controls

Details
Written by: Stanko Milosev
Category: WPF
Hits: 7818

One example of creating resizable list boxes:

<Window x:Class="DragNdrop2resize.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="2*"/>
        </Grid.ColumnDefinitions>

        <ListBox Grid.Column="0">
            <ListBoxItem Content="List box 1"/>
        </ListBox>

        <ListBox Grid.Column="1">
            <ListBoxItem Content="List box 2"/>
        </ListBox>

        <GridSplitter Width="5"
                      HorizontalAlignment="Right"
                      VerticalAlignment="Stretch"
                      Background="Red" />        

    </Grid>
</Window>

As you can see I created column definitions, and added ListBoxes which belong to these columns (Grid.Column="1" for example), and on the end I added GridSpliter. Taken from here.

---

2014-07-26 Update To have vertical resizable list boxes use something like: 

<Window x:Class="WpfApplication13.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="60"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>        

        <ListBox Grid.Row="0">
            <ListBoxItem Content="List box 1"/>
        </ListBox>

        <ListBox Grid.Row="1">
            <ListBoxItem Content="List box 2"/>
        </ListBox>

        <GridSplitter Height="5"
                      HorizontalAlignment="Stretch"
                      VerticalAlignment="Bottom"
                      Background="Red" />
    </Grid>
</Window>

Simple drag and drop

Details
Written by: Stanko Milosev
Category: WPF
Hits: 5397

To write this article I was using this web page.

For this example I was using code behind, since I didn't want to spend too much time on it.

So, first we will add two ListView's, I add them in a way to be resizible. Then, for first listview, from where you want to drag something, you need MouseMove event. Third, for second list view, where you want to drop something (in my case a simple string), Drop event, and AllowDrop has to be set to true.

Since it is recommended to start drag and drop after mouse moved a little bit, we need also PreviewMouseLeftButtonDown event.

So my XAML looks like this:

<Window x:Class="DragNdrop1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="2*"/>
        </Grid.ColumnDefinitions>

        <ListView  x:Name="listBox1" Grid.Column="0" MouseMove="listBox1_MouseMove" PreviewMouseLeftButtonDown="ListBoxItem_PreviewMouseLeftButtonDown">
            <ListViewItem Content="List box 1"/>
        </ListView>

        <ListView Grid.Column="1" Margin="5,0,-5,0" Drop="ListBox_Drop" AllowDrop="True">
            <ListViewItem Name="itemTest" Content="List box 2"/>
        </ListView>

        <GridSplitter Width="5"
                      HorizontalAlignment="Right"
                      VerticalAlignment="Stretch"
                      Background="Red" />

    </Grid>
</Window>

Code looks like this:

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;

namespace DragNdrop1
{
  /// <summary>
  /// Interaction logic for MainWindow.xaml
  /// </summary>
  public partial class MainWindow : Window
  {
    public Point startPoint;

    public MainWindow()
    {
      InitializeComponent();
    }

    private void ListBoxItem_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
      startPoint = e.GetPosition(null);
    }

    private void ListBox_Drop(object sender, DragEventArgs e)
    {
      if (e.Data.GetDataPresent("myFormat"))
      {
        string dragString = e.Data.GetData("myFormat").ToString();
        ListView listView = sender as ListView;
        listView.Items.Add(dragString);
      }
    }

    private void listBox1_MouseMove(object sender, MouseEventArgs e)
    {
      // Get the current mouse position
      Point mousePos = e.GetPosition(null);
      Vector diff = startPoint - mousePos;

      if (e.LeftButton == MouseButtonState.Pressed &&
          (Math.Abs(diff.X) > SystemParameters.MinimumHorizontalDragDistance ||
          Math.Abs(diff.Y) > SystemParameters.MinimumVerticalDragDistance))
      {
        string dragString = "Yo! A test!";

        // Initialize the drag & drop operation
        DataObject dragData = new DataObject("myFormat", dragString);
        DragDrop.DoDragDrop(itemTest, dragData, DragDropEffects.Move);
      } 
    }
  }
}

Things to notice are lines:

string dragString = "Yo! A test!";

// Initialize the drag & drop operation
DataObject dragData = new DataObject("myFormat", dragString);
DragDrop.DoDragDrop(itemTest, dragData, DragDropEffects.Move);

Here you can see dragData object which I am creating under "myFormat" string, and which I am then passing to DoDragDrop method.

 

Example you can download from here.

  1. Cursors
  2. Using ResourceDictionary
  3. Bind datagrid to MySQL
  4. Autofac

Page 7 of 12