Using Rx with MVVM pattern - WPF Discussion Boards

Re: ComboBox ItemTemplate

16-Dec-17 8:44

I want to create a combobox with checkboxes. In the popup but below the list of checkboxes I want Apply and Clear buttons.

This is what I'm looking for.

So far I have

<pre><ComboBox.ItemTemplate>
    <DataTemplate>
        <StackPanel Orientation="Vertical">

<pre>
        <StackPanel Orientation="Horizontal">
            <CheckBox IsChecked="{Binding IsSelected}"
                    Margin="5" />
            <TextBlock Text="{Binding Caption}"
                    Margin="5" />
        </StackPanel>

    </StackPanel>
</DataTemplate>

Not sure how to get the two buttons below the list. Can someone show me how to do this?

Thanks

If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.

Gerry Schmitz17-Dec-17 7:18

Re: ComboBox ItemTemplate

17-Dec-17 7:18

Nobody get points for doing weird things with "standard controls".

Pretty sure a GridView or DataGrid with checkboxes would accomplish the same thing without wasting time on "decorating".

Maybe with an "Expander" thrown in.

"(I) am amazed to see myself here rather than there ... now rather than then".
― Blaise Pascal

Kevin Marois17-Dec-17 8:14

Re: ComboBox ItemTemplate

17-Dec-17 8:14

Wow.. Why did you even bother posting?

If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.

Gerry Schmitz17-Dec-17 8:30

Using Rx with MVVM pattern

17-Dec-17 8:30

It's a parent-child / master-detail relationship.

Sync a "plain, standard" combobox with any "detail": listview, data grid, grid view for your "check boxes". Buttons operate on what's "current".

Read "Common User Access Guidelines".

Keep the weird stuff in custom / user controls.

"(I) am amazed to see myself here rather than there ... now rather than then".
― Blaise Pascal

Kenneth Haugland16-Dec-17 0:40

Kenneth Haugland

16-Dec-17 0:40

I have a canvas which I hook to the ViewModel:

XML

<Border Grid.Row="0" Margin="5" BorderThickness="1" BorderBrush="Black" x:Name="container">
    <Canvas x:Name="cnvMainView" Background="White" Height="{Binding Path=ActualHeight,
                                   ElementName=container}" Width="{Binding Path=ActualWidth, ElementName=container}">
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="MouseDown" >
                <i:InvokeCommandAction Command="{Binding MouseDown}" />
            </i:EventTrigger>
        </i:Interaction.Triggers>
    </Canvas>
</Border>

With the ViewModel:

class MainViewModel
    {
        public MainViewModel()
        {
            this.MouseDown = new DelegateCommand<object>(
                                             this.OnMouseDown, this.CanMouseDown);
        }

        public ICommand MouseDown { get; private set; }

        private void OnMouseDown(object arg)
        {
        //Do Something
        }
        private bool CanMouseDown(object arg) { return true; }
    }

But I really don't need all these details, I just need the positions received:

var MouseDownPosition = from evt in Observable.FromEventPattern<MouseEventHandler,MouseEventArgs>(
                             h => cnvMainView.MouseDown += h,
                             h => cnvMainView.MouseDown -= h)
                             select evt.EventArgs.GetPosition(cnvMainView);

So how do people hook the Rx observables to the ViewModel?

Re: Using Rx with MVVM pattern

Kenneth Haugland16-Dec-17 3:16

Kenneth Haugland

16-Dec-17 3:16

I gave up on the Rx part and did my own EventCommand:

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

namespace WpfSimpleReflectionAssistant
{
    //Code from:
    //https://social.msdn.microsoft.com/Forums/silverlight/en-US/5cd586e7-640f-447b-9040-e9270173abf7/passing-drop-event-data-in-a-command-parameter-using-mvvm-and-the-interactivity-framework?forum=silverlightmvvm
    public sealed class EventCommand : TriggerAction<DependencyObject>
    {

        public static readonly DependencyProperty CommandParameterProperty =
            DependencyProperty.Register("CommandParameter", typeof(object), typeof(EventCommand), null);


        public static readonly DependencyProperty CommandProperty = DependencyProperty.Register(
            "Command", typeof(ICommand), typeof(EventCommand), null);


        public static readonly DependencyProperty InvokeParameterProperty = DependencyProperty.Register(
            "InvokeParameter", typeof(object), typeof(EventCommand), null);

        private string commandName;

        public object InvokeParameter
        {
            get
            {
                return this.GetValue(InvokeParameterProperty);
            }
            set
            {
                this.SetValue(InvokeParameterProperty, value);
            }
        }


        public ICommand Command
        {
            get
            {
                return (ICommand)this.GetValue(CommandProperty);
            }
            set
            {
                this.SetValue(CommandProperty, value);
            }
        }

        public string CommandName
        {
            get
            {
                return this.commandName;
            }
            set
            {
                if (this.CommandName != value)
                {
                    this.commandName = value;
                }
            }
        }

        public object CommandParameter
        {
            get
            {
                return this.GetValue(CommandParameterProperty);
            }

            set
            {
                this.SetValue(CommandParameterProperty, value);
            }
        }

        public object Sender { get; set; }

        protected override void Invoke(object parameter)
        {
            this.InvokeParameter = parameter;
            if (this.AssociatedObject != null)
            {
                ICommand command = this.Command;
                if ((command != null) && command.CanExecute(this.CommandParameter))
                {
                    if (this.CommandParameter.GetType() == typeof(Canvas))
                    {
                        Canvas myCanvas = (Canvas)this.CommandParameter;
                        Point pass = Mouse.GetPosition(myCanvas);
                        command.Execute(pass);
                    }
                    else
                        command.Execute(this.CommandParameter);
                }
            }
        }
    }
}

This would probably be better as an Attached property instead, but I didn't bother just now. But surely there has to be a better way or?

Customize Scrollbar in wpf

Member 105139666-Dec-17 22:22

Member 10513966

6-Dec-17 22:22

I am working on a wpf to developer an scrollbar exactly as same as a client send me the screen, so is their any one who can help me?
[^]

Richard MacCutchan6-Dec-17 22:24

Richard MacCutchan

6-Dec-17 22:24

Help you with what?

Member 105139666-Dec-17 23:28

Member 10513966

6-Dec-17 23:28

this is the link i uploaded am image and i need to develop this kind of scrollviewer.

Richard MacCutchan6-Dec-17 23:48

Richard MacCutchan

6-Dec-17 23:48

Please read How to get an answer to your question - Silverlight / WPF Discussion Boards[^]

Iterating the cells of a gridview

Richard Deeming7-Dec-17 8:30

Richard Deeming

7-Dec-17 8:30

Google has plenty of suggestions for you. For example:
Styling a ScrollViewer/Scrollbar In WPF[^]
Custom ScrollBars in WPF[^]
ScrollBar Styles and Templates[^]

You need to go through some of those results and try to match the design.

NB: Your question reads as if you're expecting someone here to do the work and give you the code. That's not how this site works.

(And even if we were that kind of site, your link is broken. It only works for people who are logged in to your DropBox account. You would need to click the "Share" button next to the file, and generate a shared link.)

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Member 83993636-Dec-17 12:49

Member 8399363

6-Dec-17 12:49

How can I iterate through the GridView Rows?

I want to export the gridview to excel irrespective of the databinding. The Gridview doesnot have a property for Rows.

I would like to iterate through each row and column to a Datatable to export to excel.

Dim gridView As GridView = listView.View

I can get the columns from gridView, but how to get the rows?

Thanks in advance.

Gerry Schmitz6-Dec-17 16:53

6-Dec-17 16:53

You don't get "rows from a GridView".

You also don't get them from the ListView.

You get them via the ListView.ItemsSource as a collection of source objects.

"(I) am amazed to see myself here rather than there ... now rather than then".
― Blaise Pascal

Member 83993636-Dec-17 17:14

Member 8399363

6-Dec-17 17:14

Thanks for the reply

I am planning to have a generic function to export the Listview to Excel.

But different listboxes have different datasources (observable collection).

So I would like to find a way to iterate throgh GridView/ListView as in dataGrid and read cells.

Gerry Schmitz6-Dec-17 17:52

6-Dec-17 17:52

Ok, then..

Iterate the columns.
Extract the path names for each binding source bound to each column.
Use the extracted name to reflect on the rows in the itemsource and "getvalue" the property values.
Export the values.

Easy.

"(I) am amazed to see myself here rather than there ... now rather than then".
― Blaise Pascal

Member 83993636-Dec-17 18:01

Member 8399363

6-Dec-17 18:01

Thanks for the fast reply.

Can you give me a sample code for that please.

At least a link with similar example would be helpful

Thanks in advance

Gerry Schmitz6-Dec-17 18:13

6-Dec-17 18:13

Search on "sorting gridview" columns.

It will give you a start on "reflecting" lists and grids.

I don't write code for free.

"(I) am amazed to see myself here rather than there ... now rather than then".
― Blaise Pascal

How To Create This UI

Kevin Marois1-Dec-17 5:17

Re: How To Create This UI

1-Dec-17 5:17

I'm trying to create a navigation bar like this.

Yesterday I posted on this, and I was unable to get it to work right.

So, what I'm thinking is that each blue bar would be an Expander. Each Expander could then have either another Expander, or a list of hyperlinks.

I want to make it flexible enough so that by simply adding data to a group in the model, they appear as a group in the nav bar.

Here's what I got so far:
Model

public class NavigationItem : BindableBase // Implements INPC
{
    public int ItemId { get; set; }
    public string Caption { get; set; }
    public NavigationItemType ItemType { get; set; }
    public ObservableCollection<NavigationItem> NavigationItems { get; set; }
}

XAML

<pre><ListBox Grid.Row="1" 
            Grid.Column="0"
            ItemsSource="{Binding NavigationBarItems}">

<pre>
<ListBox.ItemTemplate>
    <DataTemplate>
        <Expander Header="{Binding Caption}">
            <ListBox ItemsSource="{Binding NavigationItems}">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Caption}"/>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </Expander>
    </DataTemplate>
</ListBox.ItemTemplate>

This it what I have now.
https://1drv.ms/i/s!AjBmoYAYz_v2ggqcuk5OS5YW1KDO

You can see that the first group doesn't have the subgroups.

How do I make these subgroups in the XAML?

Thanks

If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.

modified 1-Dec-17 12:46pm.

Mycroft Holmes2-Dec-17 12:38

Mycroft Holmes

2-Dec-17 12:38

What is wrong with a treeview, Telerik (and many others) have an outlook bar type tool that may be what you are looking for.

Personally I would use a treeview and use the click event to toggle the expansion. This assumes you don't need a visual cue to tell if there are children under a node.

Never underestimate the power of human stupidity
RAH

WPF TreeView - Some Nodes Not Showing

Kevin Marois30-Nov-17 11:56

Re: WPF TreeView - Some Nodes Not Showing

30-Nov-17 11:56

I have a WPF TreeView that I'm trying to load with the following items:

Projects
  - Builder 1
    - Project 1a
    - Project 1b
  - Builder 2
    - Project 2a
    - Project 2b

Companies
  - Company 1
  - Company 2

Employees
  - Employee 1
  - Employee 2

Problem
The Companies and Employees nodes both load fine. For the first level all I see is "Projects". The Builders and Projects under them don't appear. I'm guessing my HierarchicalDataTemplate is wrong but I can't see it. Anyone see what's wrong?

Thanks

Models

public class NavigationCategory : BindableBase // (Implements INPC - Abbreviated here)
{
    public string Caption { get; set; }
    public NavigationGroup Group { get; set; }
    public ObservableCollection<NavigationCategory> Categories { get; set; }
    public ObservableCollection<NavigationItem> NavigationItems { get; set; }
}

public class NavigationItem : BindableBase
{
    public int ItemId { get; set; }
    public string Caption { get; set; }
    public ViewType ViewType { get; set; }
}

The XAML

<TreeView Name="Navigation" 
            Grid.Row="1" 
            Grid.Column="0" 
            ItemsSource="{Binding NavigationBarItems}">

    <TreeView.Resources>

        <HierarchicalDataTemplate DataType="{x:Type models:NavigationCategory}" 
                                    ItemsSource="{Binding NavigationItems}">
            <TextBlock Text="{Binding Path=Caption}" />
        </HierarchicalDataTemplate>

        <DataTemplate DataType="{x:Type models:NavigationItem}">
            <TextBlock Text="{Binding Path=Caption}" />
        </DataTemplate>

    </TreeView.Resources>

</TreeView>

View Model

private ObservableCollection<NavigationCategory> _NavigationBarItems;
public ObservableCollection<NavigationCategory> NavigationBarItems
{
    get { return _NavigationBarItems; }
    set
    {
        if (_NavigationBarItems != value)
        {
            _NavigationBarItems = value;
            RaisePropertyChanged("NavigationBarItems");
        }
    }
}

private void LoadNavBar()
{
    NavigationBarItems = new ObservableCollection<NavigationCategory>
    {
        new NavigationCategory
        {
            Group = NavigationGroup.Projects,
            Caption = "Projects",

            Categories = new ObservableCollection<NavigationCategory>
            {
                new NavigationCategory
                {
                    Group = NavigationGroup.Builders,
                    Caption = "Builder 1",
                    NavigationItems = new ObservableCollection<NavigationItem>
                    {
                        new NavigationItem
                        {
                            ItemId = 101,
                            Caption = "Project 1a",
                            ViewType = ViewType.Project
                        },
                        new NavigationItem
                        {
                            ItemId = 102,
                            Caption = "Project 1b",
                            ViewType = ViewType.Project
                        }
                    }

                },
                new NavigationCategory
                {
                    Group = NavigationGroup.Builders,
                    Caption = "Builder 2",
                    NavigationItems = new ObservableCollection<NavigationItem>
                    {
                        new NavigationItem
                        {
                            ItemId = 201,
                            Caption = "Project 2a",
                            ViewType = ViewType.Project
                        },
                        new NavigationItem
                        {
                            ItemId = 202,
                            Caption = "Project 2b",
                            ViewType = ViewType.Project
                        }
                    }

                }
            }
        },

        new NavigationCategory
        {
            Group = NavigationGroup.Companies,
            Caption = "Companies",

            NavigationItems = new ObservableCollection<NavigationItem>
            {
                new NavigationItem
                {
                    ItemId = 301,
                    Caption = "Company 1a",
                    ViewType = ViewType.Company
                },
                new NavigationItem
                {
                    ItemId = 302,
                    Caption = "Company 1b",
                    ViewType = ViewType.Company
                }
            }
        },

        new NavigationCategory
        {
            Group = NavigationGroup.Employees,
            Caption = "Employees",

            NavigationItems = new ObservableCollection<NavigationItem>
            {
                new NavigationItem
                {
                    ItemId = 401,
                    Caption = "Employee 1a",
                    ViewType = ViewType.Employee
                }
            }
        }
    };
}

If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.

Mycroft Holmes30-Nov-17 12:14

Mycroft Holmes

30-Nov-17 12:14

Have you looked at Josh Smiths articles on the wpf treeview Simplifying the WPF TreeView by Using the ViewModel Pattern. I base all my extensive use of the treeview and treelistview on his design and it works well.

Never underestimate the power of human stupidity
RAH

Re: WPF TreeView - Some Nodes Not Showing

Kevin Marois30-Nov-17 12:15