Question

I am trying to develop a application where-in I a want to generate a random number after every three seconds, insert that number into a listBox and using DataTemplate display the ListBox as a rectangle.

This is for reference.

Now the problem is that I have used a DispatcherTimer which ‘ticks’ after 3 seconds but the rectangle is not updated.

I am posting my XAML and .cs code. Any hints ?

namespace ListBarGraph
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>

    public partial class MainWindow : Window
    {
        DispatcherTimer dt = new DispatcherTimer();
        DataFactory df = new DataFactory();

        public MainWindow()
        {
            InitializeComponent();
            dt.Tick += new EventHandler(dt_Tick);
            dt.Interval = new TimeSpan(0, 0, 3);
            dt.Start();

            this.PreviewKeyDown += new KeyEventHandler(MainWindow_PreviewKeyDown);
        }

        void dt_Tick(object sender, EventArgs e)
        {
            df.GetData();
        }
    }

    public class DataFactory
    {
        int number = 0;

        public IEnumerable<int> GetData()
        {
            Random random = new Random();
            number = random.Next(0, 100);
            return new int[] { 0, number };
        }
    }
}




<Window x:Class="ListBarGraph.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:ListBarGraph"
        Title="MainWindow" Height="350" Width="525">

   <Window.Resources>

       <ObjectDataProvider x:Key="someData" ObjectType="{x:Type local:DataFactory}" MethodName="GetData" />

      <DataTemplate x:Key="BarChartItemsTemplate">
         <Border Width="300" Height="50">
            <Grid>
               <Rectangle Fill="Red" StrokeThickness="2" Height="40" Width="{Binding}" HorizontalAlignment="Right" VerticalAlignment="Bottom">
                  <Rectangle.LayoutTransform>
                     <ScaleTransform ScaleX="1.5"/>
                  </Rectangle.LayoutTransform>
               </Rectangle>
         </Grid>
         </Border>
      </DataTemplate>

      <ItemsPanelTemplate x:Key="BarChartItemsPanel">
         <VirtualizingStackPanel IsItemsHost="True">
            <VirtualizingStackPanel.LayoutTransform>
               <TransformGroup>
                  <RotateTransform Angle="90"/>
                  <ScaleTransform ScaleX="-1" ScaleY="1"/>
               </TransformGroup>
            </VirtualizingStackPanel.LayoutTransform>
         </VirtualizingStackPanel>
      </ItemsPanelTemplate>

 </Window.Resources>

   <Grid>
      <ListBox ItemsSource="{Binding Source={StaticResource someData}}" ItemTemplate="{DynamicResource BarChartItemsTemplate}" ItemsPanel="{DynamicResource BarChartItemsPanel}"/>

   </Grid>

</Window>

Answer 1

Your XAML is bound to one instance of DataFactory as created by the ObjectProvider, whilst your code-behind creates another instance altogether, to which the UI is not bound.

Try this to get you started. In your XAML, remove the ObjectProvider and change your ListBox to:

<ListBox ItemsSource="{Binding}" ...

Inside dt_Tick, do this:

this.DataContext = df.GetData();