Click here to Skip to main content
15,568,616 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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
Updated 11-Jul-17 1:04am
v3

1 solution

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" />
 
Share this answer
 
v4
Comments
ThabetMicrosoft 11-Jul-17 6:08am    
Thansk for you reply,

I am sorry if my post is not clear.

In fact,Yes that's it, I have a collection of items that I put them both with a ScrollBar to scroll it, provided by showing one or more than one at a time (5 or 10 at a time)

In fact, I want objects from a collection to be scroll it in a Canvas (or if there are other suggestions better than Canvas), like the Scrollbar of news in CNN or SkyNews ...

I have tried a simple Text (not item from a collection) , and it scroll good in a Canvas :

For a writing manually text is Ok it is scrolling , but for items from a collection , I don't know how to do it? Any suggestion?

Thanks,
TheRealSteveJudge 11-Jul-17 7:09am    
Maybe the DataGrid is what you want.
It also shows a vertical scrollbar if needed.
Please see updated solution.
ThabetMicrosoft 11-Jul-17 7:35am    
Very thanks for your help,

maybe the Datagrid is the other choice..But can I make scrolling with this format:

Name : Type *** Name : Type *** Name : Type (with scrolling)

I hope that you understand my objectif?
please advise me to the right choice or the approximative for it
TheRealSteveJudge 11-Jul-17 7:39am    
Do you mean horizontal scrolling? Like a news ticker?
ThabetMicrosoft 11-Jul-17 7:40am    
yes ! that is it exactly which I want..
Any suggestion to do this with Binding to Observblecollection

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900