Databind to a ListView or TreeView with an Observable Collection with several array properties - WPF Discussion Boards

Re: Have Model Class Notify ViewModel

17-Oct-17 7:56

On my Main Window is a list of Vehicle Models:

public class MainWindowViewModel : INotifyPropertyChanged
{
    private List _Vehicles;
    public List Vehicles
    {
        get { return _Vehicles; }
        set
        {
            if (_Vehicles != value)
            {
                _Vehicles = value;
                RaisePropertyChanged("Vehicles");
            }
        }
    }

    private bool _IsValid;
    public bool IsValid
    {
        get { return _IsValid; }
        set
        {
            if (_IsValid != value)
            {
                _IsValid = value;
                RaisePropertyChanged("IsValid");
            }
        }
    }
}

Here's the VehicleModel:

public class VehicleModel : ModelBase
{
    private string _VehicleName;
    public string VehicleName
    {
        get { return _VehicleName; }
        set
        {
            if (_VehicleName != value)
            {
                _VehicleName = value;
                RaisePropertyChanged("VehicleName");
            }
        }
    }

    private bool _IsActive;
    public bool IsActive
    {
        get { return _IsActive; }
        set
        {
            if (_IsActive != value)
            {
                _IsActive = value;
                RaisePropertyChanged("IsActive");
            }
        }
    }
}

In the ViewModel, how can I tell when a VehicleModels' IsActive has changed? The IsValid property can only be True when one or more Vehicles is active.

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

Pete O'Hanlon17-Oct-17 8:51

Re: Have Model Class Notify ViewModel

17-Oct-17 8:51

The VM can listen for INPC calls from the models and react to that.

This space for rent

Kevin Marois17-Oct-17 10:17

Re: Have Model Class Notify ViewModel

17-Oct-17 10:17

That did it. Thanks!

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

Pete O'Hanlon17-Oct-17 10:44

Databind to a ListView or TreeView with an Observable Collection with several array properties

17-Oct-17 10:44

No problem. Glad to be of assistance.

This space for rent

Member 134501316-Oct-17 7:23

Member 13450131

6-Oct-17 7:23

I can't seem to get the output to display the way I want. I'm pretty new to XAML. Currently my out put looks like:
[enter image description here][1][^]

If you look at the screenshot, the output is almost correct. The 1st two columns are properties of my **LiveCameraResult** object that are added to my observable collect. The next four columns (**FaceId**, **Age**, **Gender**, **Emotion**) also come from a property of the **LiveCameraResult** object but the property is an array (**Faces**) and I want ouput of ALL the Faces in this object to display. So far the only way I have been able to get output to display at all for those four columns is to only show the 1st entity in the array by indexing to **[0]**. How can I fix my output to show multiple faces data. Here's what my **LiveCameraResult** Class looks like:

public class LiveCameraResult
    {
        public DateTime TimeStamp { get; set; }
        public string SelectedCamera { get; set; } = null;
        public string TopEmotion { get; set; } = null;
        public string FirstIdentity { get; set; }
        public List<String> Identity = new List<string>();
        public Microsoft.ProjectOxford.Face.Contract.Face[] Faces { get; set; } = null;
        public Microsoft.ProjectOxford.Common.Contract.EmotionScores[] EmotionScores { get; set; } = null;
        public string[] CelebrityNames { get; set; } = null;
        public Microsoft.ProjectOxford.Vision.Contract.Tag[] Tags { get; set; } = null;
    }

I tried the following XAML code with no luck:

HTML

<Grid Grid.ColumnSpan="2" Margin="5,0,0,-74.173" Grid.Row="2">
            <DockPanel x:Name="scrollViewContent" Margin="0,10,-5,-16.571" Height="154.901" VerticalAlignment="Top" >
                <!--<ListView Name="LogView" ItemsSource="{Binding}"  Background="#FFD4C9C9" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Margin="0,0,5,0" MinHeight="153.143" DockPanel.Dock="Top" IsSynchronizedWithCurrentItem="True" >-->
                    <!--<ListView.View >-->
                    <TreeView ItemsSource="{Binding}">
                           
                        <!-- Conference template -->
                           
                        <TreeView.ItemTemplate>
                            <HierarchicalDataTemplate ItemsSource="{Binding}">
                                <TextBlock Foreground="Red" Text="{Binding TimeStamp}" />
                                <!-- Team template -->
                                <HierarchicalDataTemplate.ItemTemplate>
                                    <HierarchicalDataTemplate>
                                    <TextBlock Foreground="Red" Text="{Binding Path=Faces.FaceAttributes.Gender}"/>
                                        
                                        <!-- Player template -->
                                        <HierarchicalDataTemplate.ItemTemplate>
                                            <DataTemplate>
                                                <TextBlock Text="{Binding}" />
                                            </DataTemplate>
                                        </HierarchicalDataTemplate.ItemTemplate>
                                    </HierarchicalDataTemplate>
                                </HierarchicalDataTemplate.ItemTemplate>
                            </HierarchicalDataTemplate>
                        </TreeView.ItemTemplate>
                    </TreeView>

My original XAML looked like this:

HTML

<Grid Grid.ColumnSpan="2" Margin="5,0,0,-74.173" Grid.Row="2">
            <DockPanel x:Name="scrollViewContent" Margin="0,10,-5,-16.571" Height="154.901" VerticalAlignment="Top" >
                <ListView Name="LogView" ItemsSource="{Binding}"  Background="#FFD4C9C9" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Margin="0,0,5,0" MinHeight="153.143" DockPanel.Dock="Top" IsSynchronizedWithCurrentItem="True" >
                    <ListView.View >
                        <GridView ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.CanContentScroll="True" >
                            <GridViewColumn Width="auto" >
                                <GridViewColumnHeader Tag="Timestamp" Content="Timestamp" Padding="10,0,2,0" >
                                    <GridViewColumnHeader.Background>
                                        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                            <GradientStop Color="White" Offset="0"/>
                                            <GradientStop Color="White" Offset="0.4091"/>
                                            <GradientStop Color="#FFF7F8F9" Offset="1"/>
                                        </LinearGradientBrush>
                                    </GridViewColumnHeader.Background>
                                </GridViewColumnHeader>
                                <GridViewColumn.CellTemplate>
                                    <DataTemplate>
                                        <Grid>
                                            <TextBlock Text="{Binding TimeStamp}"/>
                                        </Grid>
                                    </DataTemplate>
                                </GridViewColumn.CellTemplate>
                            </GridViewColumn>
                            <GridViewColumn Width="auto" >
                                <GridViewColumnHeader Tag="Source" Content="Source" Padding="10,0,2,0" ScrollViewer.CanContentScroll="True" />
                                <GridViewColumn.CellTemplate>
                                    <DataTemplate>
                                        <Grid>
                                            <TextBlock Text="{Binding SelectedCamera}"/>
                                        </Grid>
                                    </DataTemplate>
                                </GridViewColumn.CellTemplate>
                            </GridViewColumn>
                            <GridViewColumn Width="auto" >
                                <GridViewColumnHeader Tag="Face ID" Content="Face ID" Padding="10,0,2,0" MinWidth="159.413" />
                                <GridViewColumn.CellTemplate>
                                    <DataTemplate>
                                        <Grid>
                                            <TextBlock DataContext="{Binding Path=Faces}" Text="{Binding Path=FaceId}"/>
                                        </Grid>
                                    </DataTemplate>
                                </GridViewColumn.CellTemplate>
                            </GridViewColumn>
                            <GridViewColumn Width="auto" >
                                <GridViewColumnHeader Tag="Gender" Content="Gender" Padding="10,0,2,0" MinWidth="61.102" />
                                <GridViewColumn.CellTemplate>
                                    <DataTemplate>
                                        <Grid>
                                            <TextBlock Text="{Binding Path=Faces[0].FaceAttributes.Gender}"/>
                                        </Grid>
                                    </DataTemplate>
                                </GridViewColumn.CellTemplate>
                            </GridViewColumn>
                            <GridViewColumn Width="auto" >
                                <GridViewColumnHeader Tag="Age" Content="Age" Padding="10,0,2,0" MinWidth="42.797" />
                                <GridViewColumn.CellTemplate>
                                    <DataTemplate>
                                        <Grid>
                                            <TextBlock Text="{Binding Path=Faces[0].FaceAttributes.Age}"/>
                                        </Grid>
                                    </DataTemplate>
                                </GridViewColumn.CellTemplate>
                            </GridViewColumn>
                            <GridViewColumn Width="auto" >
                                <GridViewColumnHeader Tag="Emotion" Content="Emotion" Padding="10,0,2,0" MinWidth="110" />
                                <GridViewColumn.CellTemplate>
                                    <DataTemplate>
                                        <Grid>
                                            <TextBlock Text="{Binding Path=TopEmotion}"/>
                                        </Grid>
                                    </DataTemplate>
                                </GridViewColumn.CellTemplate>
                            </GridViewColumn>
                            <GridViewColumn Width="auto" >
                                <GridViewColumnHeader Tag="Identity" Content="Identity" Padding="10,0,2,0" MinWidth="119.388" />
                                <GridViewColumn.CellTemplate>
                                    <DataTemplate>
                                        <Grid>
                                            <TextBlock Text="{Binding Path=FirstIdentity}"/>
                                        </Grid>
                                    </DataTemplate>
                                </GridViewColumn.CellTemplate>
                            </GridViewColumn>
                        </GridView>
                    </ListView.View>
                </ListView>
            </DockPanel>
        </Grid>

Here's just one LiveCameraResult object in json format:

HTML

{"TimeStamp":"2017-09-30T17:34:26.3317547-04:00","SelectedCamera":"Camera 1","TopEmotion":null,"Faces":[{"FaceId":"9b512175-59f3-4a1c-b19e-d650cda0bffc","FaceRectangle":{"Width":159,"Height":159,"Left":311,"Top":233},"FaceLandmarks":null,"FaceAttributes":{"Age":48.4,"Gender":"male","HeadPose":{"Roll":1.9,"Yaw":7.6,"Pitch":0.0},"Smile":0.0,"FacialHair":{"Moustache":0.5,"Beard":0.5,"Sideburns":0.3},"Emotion":{"Anger":0.0,"Contempt":0.0,"Disgust":0.0,"Fear":0.0,"Happiness":0.0,"Neutral":0.997,"Sadness":0.003,"Surprise":0.0},"Glasses":"NoGlasses","Blur":null,"Exposure":null,"Noise":null,"Makeup":{"EyeMakeup":false,"LipMakeup":false},"Accessories":null,"Occlusion":null,"Hair":{"Bald":0.17,"Invisible":false,"HairColor":[{"Color":"Black","Confidence":0.99},{"Color":"Other","Confidence":0.64},{"Color":"Gray","Confidence":0.59},{"Color":"Brown","Confidence":0.56},{"Color":"Red","Confidence":0.09},{"Color":"Blond","Confidence":0.04}]}}},{"FaceId":"19f12175-59f3-4a1c-b19e-83cccda06aa2","FaceRectangle":{"Width":120,"Height":120,"Left":211,"Top":133},"FaceLandmarks":null,"FaceAttributes":{"Age":36.4,"Gender":"female","HeadPose":{"Roll":1.9,"Yaw":7.6,"Pitch":0.0},"Smile":0.0,"FacialHair":{"Moustache":0.0,"Beard":0.0,"Sideburns":0.3},"Emotion":{"Anger":1.0,"Contempt":0.0,"Disgust":0.0,"Fear":0.0,"Happiness":0.0,"Neutral":0.597,"Sadness":0.003,"Surprise":0.0},"Glasses":"SunGlasses","Blur":null,"Exposure":null,"Noise":null,"Makeup":{"EyeMakeup":true,"LipMakeup":false},"Accessories":null,"Occlusion":null,"Hair":{"Bald":0.17,"Invisible":false,"HairColor":[{"Color":"Black","Confidence":0.99},{"Color":"Other","Confidence":0.64},{"Color":"Gray","Confidence":0.59},{"Color":"Brown","Confidence":0.56},{"Color":"Red","Confidence":0.09},{"Color":"Blond","Confidence":0.04}]}}}],,"EmotionScores":null,"CelebrityNames":null,"Tags":[{"Name":"person","Confidence":0.99842345714569092,"Hint":null},{"Name":"man","Confidence":0.981597900390625,"Hint":null},{"Name":"indoor","Confidence":0.95850932598114014,"Hint":null},{"Name":"window","Confidence":0.9486764669418335,"Hint":null}],"Animal":null,"Building":null,"Trans":null,"People":null,"Object":null,"Food":null,"Text":null,"Plant":null,"Indoor":null,"Dark":null,"Sky":null,"Outdoor":null,"Abstract":null,"Ocr":null}

To summarize, This log updates every three seconds and give real time data. The TimeStamp, and Camera output is right but the rest of the columns come from properties that are arrays inside an object that hold data for multiple faces. How can I display data so that if at say 10:30 from camera 1 it picks up 4 faces I can see their face IDs, gender, age and identities.

[1]: https://i.stack.imgur.com/ElOr1.jpg

Re: Databind to a ListView or TreeView with an Observable Collection with several array properties

Gerry Schmitz7-Oct-17 7:13

Gerry Schmitz

7-Oct-17 7:13

I would first import everything into something more "friendly" and "common"; like generic Lists or Observable collections or a concurrent dictionary.

You're on the right path (and could "index" the rest), but converting your input stream makes things much more pleasant down stream.

You can do a lot of work in 3 seconds.

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

Re: Databind to a ListView or TreeView with an Observable Collection with several array properties

Mycroft Holmes7-Oct-17 15:07

7-Oct-17 15:07

Take a look at Josh Smiths treeview articles, I use the treeview and treelistview extensively and use Josh's structure. Gerry is right that you should be putting the data into an object (livecameraresult) but I would then use the TreeNode to bind with the treeview.

Never underestimate the power of human stupidity
RAH

Group Box Visibility

Mycroft Holmes3-Oct-17 21:50

3-Oct-17 21:50

Is there some magic that will allow me to control the visibility of a GroupBox . I have a visibility converter that works perfectly on a button but a GroupBox ignores it completely.

Combobox with 2 options, selected item drives and OPC property in the VM that changes a boolean OPC property that is bound to the GroupBox visibility. The event path works works, values change as expected, button visibility changes but the GroupBox stubbornly stays visible.

XML

<GroupBox Header="Rate Type"
    Visibility="{Binding IsPAssThrough, Converter={StaticResource VisibilityConverter}}">

Never underestimate the power of human stupidity
RAH

Gerry Schmitz4-Oct-17 6:29

Gerry Schmitz

4-Oct-17 6:29

Visibility is an enum, and not a bool; as your XAML implies.

And I use all 3; so a binary converter is useless.

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

Mycroft Holmes4-Oct-17 13:18

4-Oct-17 13:18

The converter returns Collapsed or Visible, the only 2 states I need. The converter works perfectly for a command button but not for a groupbox, the issue is in the groupbox control.

Never underestimate the power of human stupidity
RAH

Richard Deeming4-Oct-17 9:21

Richard Deeming

4-Oct-17 9:21

It looks like it should work, assuming your converter is returning the correct values.

Are there any binding errors in the Visual Studio output window?

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

Mycroft Holmes4-Oct-17 21:31

Create Binding In View Model Code

4-Oct-17 21:31

The VM grew too complex so instead I split it along the lines of the visibility requirement which is logical and happens to eliminate this issue nicely.

Never underestimate the power of human stupidity
RAH

Kevin Marois21-Sep-17 7:08

Re: Create Binding In View Model Code

21-Sep-17 7:08

I have a wizard. When page 1 is reached I get a UserControl from a list of MEF plugins and add it to the page.

The UserControl has a DP called IsValid on it. I want to bind this property to a property on the VM called IsDatabaseValid

Here's what I have

private void NextExecuted()
{
    CurrentPage = CurrentPage + 1;

    DatabaseSelectorControl = null;
    IDatabase control = null;

    switch (CurrentPage)
    {
        case 0:
            break;

        case 1:
            // Get the User Control from the plugins. Convert it from IDatabase to a user control
            control = ((App)Application.Current).DatabaseService.DBPlugins
                    .Where(x => x is UserControl && x.DatabaseType == SelectedDatabaseType.DatabaseType).FirstOrDefault();

            DatabaseSelectorControl = (DatabaseSelectorBase)control;
            break;
    }

    if (DatabaseSelectorControl != null)
    {
                Binding binding = new Binding();
                binding.Source = this;
                binding.Path = new PropertyPath("IsDatabaseValid");
                binding.Mode = BindingMode.TwoWay;
                binding.UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged;
                BindingOperations.SetBinding(???, DatabaseSelectorControl.IsValid, binding); // This is the part I'm not sure of
    }

}

How do I create this binding?

Thanks

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

Richard Deeming21-Sep-17 9:03

Richard Deeming

21-Sep-17 9:03

It should be as simple as:

BindingOperations.SetBinding(DatabaseSelectorControl, DatabaseSelectorControl.IsValidProperty, binding);

NB: Assuming DatabaseSelectorBase inherits from UserControl, you can simplify the LINQ statement that finds the control to:

DatabaseSelectorControl = ((App)Application.Current).DatabaseService.DBPlugins
    .OfType<DatabaseSelectorBase>()
    .FirstOrDefault(x => x.DatabaseType == SelectedDatabaseType.DatabaseType);

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

Re: Create Binding In View Model Code

Kevin Marois22-Sep-17 4:39

Re: Add Path To ItemsControl In Code Behind

22-Sep-17 4:39

The only change I needed was this

BindingOperations.SetBinding(DatabaseSelectorControl, DatabaseSelectorControl.IsValidProperty, binding);

to this

BindingOperations.SetBinding(DatabaseSelectorControl, DatabaseSelectorBase.IsValidProperty, binding);

to this

"DatabaseSelectorBase" is the control where "DatabaseSelectorControl" is an instance.

Thansk for both tips. Worked great.

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

Pete O'Hanlon8-Sep-17 9:10

Re: Add Path To ItemsControl In Code Behind

8-Sep-17 9:10

Your Path doesn't have a Fill.

This space for rent

Kevin Marois8-Sep-17 9:23

Re: Add Path To ItemsControl In Code Behind

8-Sep-17 9:23

Sorry, I figured it out

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

Pete O'Hanlon8-Sep-17 21:40

8-Sep-17 21:40

There was no need to delete your question. Now, anyone else who is facing a similar issue won't have the context.

This space for rent

Learning WPF

Simon_Whale8-Sep-17 0:05

Simon_Whale

8-Sep-17 0:05

I have more of a win forms background and while it is quiet at work thought I'd have a look at WPF.

Does anyone have a good place / reference that I could use for UI design?

Every day, thousands of innocent plants are killed by vegetarians.

Help end the violence EAT BACON

Re: Learning WPF

Richard MacCutchan8-Sep-17 5:17

Richard MacCutchan

8-Sep-17 5:17

Go to the WPF section in CodeProject articles, and look at all those by Sascha Barber; some really excellent materials.

Re: Learning WPF

Mycroft Holmes8-Sep-17 13:18