How can I binding canvas to an observablecollection WPF

Question

0.00/5 (No votes)

See more:

I created a Scroll bar at the bottom of the window,

to scroll a simple text written manually, it works well

But I want to scroll a list of items from my database, I do the binding to an ObservableCollection.. but I don't have the return of my ItemSource... I have the return :

(Collection)

in the Scroll bar !

The XAML:

XML

<Window x:Class="WPFAuthentification.Views.NewUserView"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        
           Title="NewUserView" Height="500" Width="800" Icon="../Images/fuelSoft.png">
		 <Grid Background="White" VerticalAlignment="Top" HorizontalAlignment="Center">   
		   //....
		   
		    <Canvas Background="White" Margin="-717,-281,151,63" Grid.ColumnSpan="4" >
               <Canvas Canvas.Top="572" ClipToBounds="True" Name="canMain" Background="LightGray" 
			     Canvas.Left="614" Loaded="canMain_Loaded"  >
                   <TextBlock  Text="{Binding RoleList}"  FontSize="25" Name="tbmarquee" Canvas.Top="25" Width="1346" 
                             RenderTransformOrigin="0.465,0.524" />
                
                </Canvas>         
           
           </Canvas>      
        
         </Grid>
    </Window>

the XAML.cs:

C#

public NewUserView()
       {
           InitializeComponent();
       }

            private void canMain_Loaded(object sender, RoutedEventArgs e)
       {
           DoubleAnimation doubleAnimation = new DoubleAnimation();
           doubleAnimation.From = -tbmarquee.ActualWidth;
           doubleAnimation.To = canMain.ActualWidth;
           doubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
           doubleAnimation.Duration = new Duration(TimeSpan.Parse("0:0:18"));
           tbmarquee.BeginAnimation(Canvas.LeftProperty, doubleAnimation);
       }

What I have tried:

the ViewModel:

public NewUserViewModel(int userId)
        {
		    //....
		}
            if
         private ObservableCollection<UserRoleClass> roleList;
         public ObservableCollection<UserRoleClass> RoleList
          {
            get { return roleList; }
            set
            {
                roleList = value;
                OnPropertyChanged("RoleList");
            }
          }

Posted 10-Jul-17 5:23am

ThabetMicrosoft

Updated 11-Jul-17 0:04am

v3

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

TheRealSteveJudge · Answer 1 · 2017-07-10T21:34:00

I do not know how your RoleList is defined.

Maybe this example can lead you into the right direction:

C#

public class Role
{
   public string Name { get; set; }
   public string Type { get; set; }
}

And your ObservableCollection is defined like this

C#

private ObservableCollection<Role> roleList;

public ObservableCollection<Role> RoleList
{
    get { return roleList; }
    set
    {
        if (roleList == value) return;

        roleList = value;

        OnPropertyChanged();
    }
}

Then you could display your collection in a ListBox.
You must use a DataTemplate.

<ListBox ItemsSource="{Binding RoleList}">
	<ListBox.ItemTemplate>
	    <DataTemplate>
	        <Grid>
		    <Grid.ColumnDefinitions>
			<ColumnDefinition></ColumnDefinition>
			<ColumnDefinition></ColumnDefinition>
		    </Grid.ColumnDefinitions>
		    <TextBlock Text="{Binding Name}"></TextBlock>
		    <TextBlock Grid.Column="1" Text="{Binding Type}"></TextBlock>
		</Grid>
	    </DataTemplate>
	</ListBox.ItemTemplate>
</ListBox>

A TextBlock alone cannot display a collection.

A better idea would be to use a DataGrid.

<DataGrid ItemsSource="{Binding RoleList}"
                      AutoGenerateColumns="False"
                      HeadersVisibility="Column"                 
                      CanUserAddRows="False">
	<DataGrid.Columns>
		<DataGridTemplateColumn>
			<DataGridTemplateColumn.HeaderTemplate>
				<DataTemplate>
					<TextBlock Text="Name"></TextBlock>
				</DataTemplate>
			</DataGridTemplateColumn.HeaderTemplate>
			<DataGridTemplateColumn.CellTemplate>
				<DataTemplate>
					<TextBlock Text="{Binding Name}"></TextBlock>
				</DataTemplate>
			</DataGridTemplateColumn.CellTemplate>
		</DataGridTemplateColumn>
		<DataGridTemplateColumn Width="*">
			<DataGridTemplateColumn.HeaderTemplate>
				<DataTemplate>
					<TextBlock Text="Type"></TextBlock>
				</DataTemplate>
			</DataGridTemplateColumn.HeaderTemplate>
			<DataGridTemplateColumn.CellTemplate>
				<DataTemplate>
					<TextBlock Text="{Binding Type}"></TextBlock>
				</DataTemplate>
			</DataGridTemplateColumn.CellTemplate>
		</DataGridTemplateColumn>
	</DataGrid.Columns>
</DataGrid>

If you want to have something like a news ticker you need a value converter
for your original canvas solution.

namespace WpfApplicationTest1.Converters
{
    public class ListConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var roles = value as ObservableCollection<Role>;

            if (roles != null)
            {
                var stringBuilder = new StringBuilder();

                foreach (var role in roles)
                {
                    stringBuilder.Append($"{role.Name} {role.Type}");
                }

                return stringBuilder.ToString();
            }

            return null;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

In your view you must use the value converter like this.
Add this to your Window namespace section:

xmlns:local="clr-namespace:WpfApplicationTest1"

<TextBlock  Text="{Binding RoleList, Converter={StaticResource ListConverter}}"  FontSize="25" Name="tbmarquee" Canvas.Top="25" Width="1346" 
                             RenderTransformOrigin="0.465,0.524" />