Click here to Skip to main content
14,392,608 members
Rate this:
Please Sign up or sign in to vote.
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:

<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:

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

Rate this:
Please Sign up or sign in to vote.

Solution 1

I do not know how your RoleList is defined.

Maybe this example can lead you into the right direction:
public class Role
{
   public string Name { get; set; }
   public string Type { get; set; }
}

And your ObservableCollection is defined like this
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" />
   
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
TheRealSteveJudge 11-Jul-17 8:06am
   
Do you want to concatenate all elements of the ObservableCollection to just one string?
ThabetMicrosoft 11-Jul-17 8:10am
   
In fact I have the class has two columns: Message and Datetime,
and I want to scroll per exemple 5 from the table like this format:

Message1: DateTile1 *** Message2: DateTile2 *** Message2: DateTile2 ..

Yes to make all these elements to just one string ,
( string =string1 + string2+string3) (string1: Message1: DateTile1 ***; ...)
TheRealSteveJudge 11-Jul-17 8:15am
   
Please have a look at the updated solution.
ThabetMicrosoft 11-Jul-17 9:49am
   
Thanks a lot for your trying,
but Sorry I'm deceived ..I don't undersdtand your update code..

the first we don't need a Datagrid ?
then the code : xmlns:local="clr-namespace:WpfApplicationTest1" this is in my XMAL file, i had xmlns:local="clr-namespace:WPFAuthentification.HelperClasses"


And I have an Eroor in the ligne : stringBuilder.Append($"{role.name} {role.id}");
TheRealSteveJudge 11-Jul-17 9:57am
   
Don't give up. Just try my suggested code.
ThabetMicrosoft 11-Jul-17 10:01am
   
yes i am trying ..Sorry the public class ListConverter : IValueConverter {...}
is it in XAML.cs or in the ViewModel?
TheRealSteveJudge 11-Jul-17 10:08am
   
It is an own class named ListConverter.cs in subfolder converters.
Therefor it has the namespace WpfApplicationTest1.Converters

Maybe you can try something different.
I just found here: http://www.jarloo.com/rumormill4/

This is a newsticker project.
ThabetMicrosoft 11-Jul-17 10:12am
   
ok good I understand..It is very nice project. I will try like it for begin

i would to thank you very much for your help and support
TheRealSteveJudge 11-Jul-17 10:45am
   
You're welcome.
ThabetMicrosoft 11-Jul-17 10:08am
   
** I have an error : "impoosible to reeolve the ListConverter "

maybe the problem is in the ligne: xmlns:local="clr-namespace:WpfApplicationTest1" because I have for advance this in my XAML:
<Window x:Class="WPFAuthentification.Views.NewUserView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:local="clr-namespace:WPFAuthentification.HelperClasses"
....

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




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100