Binding A data to WPF listbox on runtime

Question

I am new to WPF and im trying to initiate a ListBox values at runtime, all I need is to add the values from 0-15000 at intervals of 500 (i.e. 0, 500, 1000 etc..) As for now I am using -

And once the class get initialized im simple adding values to the list like that -

    List<int> intTimeData = new List<int>();

    for (int i = 0; i <= 15000; )
    {
        intTimeData.Add(i);
        i += 500;
    }

    listBoxIntTime.ItemsSource = intTimeData;

problem is it's not working the list looks smooshi:

enter image description here

...any help?

The xaml code is -

<UserControl x:Class="WpfApplication1.IRMore"
             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:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
            xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid"
            xmlns:theme="http://schemas.Xceed.Wpf.Toolkit.Themes"

             mc:Ignorable="d" 
             d:DesignHeight="264" d:DesignWidth="438" Foreground="Gray">
    <Grid Height="257" Width="439">
        <Canvas Width="439" Height="257" Margin="0,0,66,23">
            <Image HorizontalAlignment="Left" Name="image1" Source="Resources\B_10.png" Stretch="Fill" VerticalAlignment="Top" Width="439" Height="257" Canvas.Top="0" Canvas.Left="0"  />
            <Label Content="Image" Height="28" HorizontalAlignment="Left" Margin="22,220,0,0" Name="label5" VerticalAlignment="Top" Width="69" FontSize="12" Canvas.Left="-8" Canvas.Top="-213" />
            <Label Content="Sharpening" Height="28" HorizontalAlignment="Left" Margin="22,220,0,0"  VerticalAlignment="Top" Width="105" FontSize="12" Canvas.Left="-8" Canvas.Top="-172" />
            <Label Content="Polarity" Height="28" HorizontalAlignment="Left" Margin="22,220,0,0"  VerticalAlignment="Top" Width="71" FontSize="12" Canvas.Left="-8" Canvas.Top="-140" />
            <Label Content="DRC" Height="28" HorizontalAlignment="Left" Margin="22,220,0,0"  VerticalAlignment="Top" Width="43" FontSize="12" Canvas.Left="-8" Canvas.Top="-103" />
            <Label Content="Calibration" Height="28" HorizontalAlignment="Left" Margin="22,220,0,0"  VerticalAlignment="Top" Width="105" FontSize="12" Canvas.Left="-8" Canvas.Top="-56" />
            <Label Content="Mirror" Height="28" HorizontalAlignment="Left" Margin="22,220,0,0"  VerticalAlignment="Top" Width="59" FontSize="12" Canvas.Left="205" Canvas.Top="-178" />
            <Label Canvas.Left="227" Canvas.Top="117" Content="Int. time" FontSize="12" Height="28" Width="59" />
            <Label Canvas.Left="232" Canvas.Top="215" Content="Camera Power" FontSize="12" Height="28" Width="101" />
            <Image Source ="Resources\A_16-slider.png" Canvas.Left="341" Canvas.Top="41" Height="25" Name="image2" Stretch="None" Width="52" />
            <Label Canvas.Left="319" Canvas.Top="42" Content="On" FontSize="12" Height="28" Width="24" />
            <Label Canvas.Left="399" Canvas.Top="42" Content="Off" FontSize="12" Height="28" Width="24" />
            <Canvas></Canvas>
            <Image Canvas.Left="124" Canvas.Top="47" Height="25" Name="image3" Source="Resources\A_16-slider.png" Stretch="None" Width="52" />
            <RadioButton AllowDrop="True" Canvas.Left="129" Canvas.Top="51" Content="Switch" FontWeight="Bold" ForceCursor="False" Grid.Row="2" Height="16" Name="radioButtonSharpeningOn" Style="{StaticResource ToggleSwitchStyle}" Width="20" Checked="radioButtonSharpening_Checked">
                <RadioButton.Template>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Canvas>
                            <Image Name="buttonImage" Opacity="0" Source="resources\A_16-round-button.png" />
                        </Canvas>
                        <ControlTemplate.Triggers>
                            <Trigger Property="ToggleButton.IsChecked" Value="true">
                                <Setter Property="UIElement.Opacity" TargetName="buttonImage" Value="1" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </RadioButton.Template>
            </RadioButton>
            <RadioButton AllowDrop="True" Canvas.Left="154" Canvas.Top="51" Content="Switch" FontWeight="Bold" ForceCursor="False" Grid.Row="2" Height="17" Name="radioButtonSharpeningOff" Style="{StaticResource ToggleSwitchStyle}" Width="24" Checked="radioButtonSharpening_Checked">
                <RadioButton.Template>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Canvas>
                            <Image Name="buttonImage" Opacity="0" Source="resources\A_16-round-button.png" />
                        </Canvas>
                        <ControlTemplate.Triggers>
                            <Trigger Property="ToggleButton.IsChecked" Value="true">
                                <Setter Property="UIElement.Opacity" TargetName="buttonImage" Value="1" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </RadioButton.Template>
            </RadioButton>
            <Label Canvas.Left="102" Canvas.Top="49" Content="On" FontSize="12" Height="28" Width="24" />
            <Label Canvas.Left="182" Canvas.Top="49" Content="Off" FontSize="12" Height="28" Width="24" />
            <Canvas Name="DRC" > 
            <Image Canvas.Left="124" Canvas.Top="119" Height="25" Name="image4" Source="Resources\A_16-slider.png" Stretch="None" Width="52" />
                <Label Canvas.Left="100" Canvas.Top="122" Content="On" FontSize="12" Height="28" Width="24" />
                <Label Canvas.Left="180" Canvas.Top="122" Content="Off" FontSize="12" Height="28" Width="24" />
            <RadioButton AllowDrop="True" Canvas.Left="129" Canvas.Top="123" Content="Switch" FontWeight="Bold" ForceCursor="False" Grid.Row="2" Height="22" Name="radioButtonDRCOn" Style="{StaticResource ToggleSwitchStyle}" Width="21" Checked="radioButtonDRC_Checked">
                <RadioButton.Template>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Canvas>
                            <Image Name="buttonImage" Opacity="0" Source="resources\A_16-round-button.png" />
                        </Canvas>
                        <ControlTemplate.Triggers>
                            <Trigger Property="ToggleButton.IsChecked" Value="true">
                                <Setter Property="UIElement.Opacity" TargetName="buttonImage" Value="1" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </RadioButton.Template>
            </RadioButton>
            <RadioButton AllowDrop="True" Canvas.Left="154" Canvas.Top="124" Content="Switch" FontWeight="Bold" ForceCursor="False" Grid.Row="2" Height="21" Name="radioButtonDRCOff" Style="{StaticResource ToggleSwitchStyle}" Width="24" Checked="radioButtonDRC_Checked">
                <RadioButton.Template>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Canvas>
                            <Image Name="buttonImage" Opacity="0" Source="resources\A_16-round-button.png" />
                        </Canvas>
                        <ControlTemplate.Triggers>
                            <Trigger Property="ToggleButton.IsChecked" Value="true">
                                <Setter Property="UIElement.Opacity" TargetName="buttonImage" Value="1" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </RadioButton.Template>
            </RadioButton>
            </Canvas>
            <CheckBox AllowDrop="True" Canvas.Left="84" Canvas.Top="161" Content="Switch" FontWeight="Bold" ForceCursor="False" Grid.Row="2" Height="31" Name="radioButtonCalibration" Style="{StaticResource ToggleSwitchStyle}" Width="148" Checked="radioButtonCalibration_Checked">
                <CheckBox.Template>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Canvas Name="Polarity">
                            <Image Name="buttonImage" Source="resources\A_28-non-selected.png" />
                            <TextBlock VerticalAlignment="Center" FontSize="12" Foreground="White" FontWeight="Normal" HorizontalAlignment="Center" TextWrapping="Wrap" Canvas.Left="10" Canvas.Top="5">1P NUC CALIBRATION</TextBlock>
                        </Canvas>
                        <ControlTemplate.Triggers>
                            <Trigger Property="ToggleButton.IsChecked" Value="true">
                                <Setter Property="UIElement.Opacity" TargetName="buttonImage" Value="1" />
                                <Setter Property="Source" TargetName="buttonImage" Value="Resources\A_28-selected.png" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </CheckBox.Template>
            </CheckBox>
            <CheckBox AllowDrop="True" Canvas.Left="14" Canvas.Top="213" Content="Switch" FontWeight="Bold" ForceCursor="False" Grid.Row="2" Height="31" Name="radioButtonRestoreSetting" Style="{StaticResource ToggleSwitchStyle}" Width="148" Click="radioButtonRestoreSetting_Click">
                <CheckBox.Template>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Canvas Name="Polarity">
                            <Image Name="buttonImage" Source="resources\A_28-non-selected.png" />
                            <TextBlock Canvas.Left="30" Canvas.Top="4" FontSize="12" FontWeight="Normal" Foreground="White" HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Center">Restore Setting</TextBlock>
                        </Canvas>
                        <ControlTemplate.Triggers>
                            <Trigger Property="ToggleButton.IsChecked" Value="true">
                                <Setter Property="UIElement.Opacity" TargetName="buttonImage" Value="1" />
                                <Setter Property="Image.Source" TargetName="buttonImage" Value="Resources\A_28-selected.png" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </CheckBox.Template>
            </CheckBox>
            <Canvas Name="OnOff" Height="31" Width="89" Canvas.Top="207" Canvas.Left="330">
                <Image Canvas.Left="18" Canvas.Top="3" Height="25" Name="image5" Source="Resources\A_16-slider.png" Stretch="None" Width="52" />
                <Label Canvas.Left="-2" Canvas.Top="5" Content="On" FontSize="12" Height="28" Width="24" />
                <Label Canvas.Left="70" Canvas.Top="5" Content="Off" FontSize="12" Height="28" Width="24" />
                <RadioButton AllowDrop="True" Canvas.Left="23" Canvas.Top="8" Content="Switch" FontWeight="Bold" ForceCursor="False" Grid.Row="2" Height="23" Name="radioButtoncameraPowerOn" Style="{StaticResource ToggleSwitchStyle}" Width="23" Checked="radioButtonCameraPower_Checked" HorizontalAlignment="Center" VerticalAlignment="Center">
                    <RadioButton.Template>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Canvas>
                        <Image Name="buttonImage" Opacity="0" Source="resources\A_16-round-button.png" />
                    </Canvas>
                    <ControlTemplate.Triggers>
                        <Trigger Property="ToggleButton.IsChecked" Value="true">
                            <Setter Property="UIElement.Opacity" TargetName="buttonImage" Value="1" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </RadioButton.Template>
        </RadioButton>
                <RadioButton AllowDrop="True" Canvas.Left="48" Canvas.Top="8" Content="Switch" FontWeight="Bold" ForceCursor="False" Grid.Row="2" Height="23" Name="radioButtonCameraPowerOff" Style="{StaticResource ToggleSwitchStyle}" Width="23" Checked="radioButtonCameraPower_Checked" HorizontalAlignment="Center" VerticalAlignment="Center">
            <RadioButton.Template>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Canvas>
                        <Image Name="buttonImage" Opacity="0" Source="resources\A_16-round-button.png" />
                    </Canvas>
                    <ControlTemplate.Triggers>
                        <Trigger Property="ToggleButton.IsChecked" Value="true">
                            <Setter Property="UIElement.Opacity" TargetName="buttonImage" Value="1" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </RadioButton.Template>
        </RadioButton>
            </Canvas>
            <!--<xctk:IntegerUpDown Style="{StaticResource myIntUpDownStyle}" FormatString="" Increment="500" Maximum="15000" Minimum="0" Value="0" Name="updownIntTime" Text="0" Canvas.Left="334" Canvas.Top="115" Width="60" DataContextChanged="updownIntTime_DataContextChanged"></xctk:IntegerUpDown>-->
            <Label Canvas.Left="227" Canvas.Top="81" Content="Frame Averaging" FontSize="12" Height="28" Width="92" />
            <ListBox SelectionChanged="listBoxframeAvg_SelectionChanged" Name="listBoxframeAvg" Height="25" Width="60" Canvas.Left="339" Canvas.Top="80" Background="#FF404040" BorderBrush="{x:Null}">
                <ListBoxItem Content="1" Background="#FF404040" BorderBrush="Black" OpacityMask="Black"></ListBoxItem>
                <ListBoxItem Content="2" />
                <ListBoxItem Content="4" />
                <ListBoxItem Content="8" />
                <ListBoxItem Content="16" />
                <ListBoxItem Content="32" />
                <ListBoxItem Content="64" />
                <ListBoxItem />
            </ListBox>
<ListBox SelectionChanged="listBoxIntTime_SelectionChanged" Name="listBoxIntTime" Height="25" Width="60" Canvas.Left="339" Canvas.Top="117" Background="#FF404040" BorderBrush="{x:Null}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="60"/>
                </Grid.ColumnDefinitions>
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

            <RadioButton Name="radiobuttonOnMirror" AllowDrop="True" Canvas.Left="347" Canvas.Top="45" Height="25" Style="{StaticResource ToggleSwitchStyle}" Width="30" Content="Switch" ForceCursor="False" FontWeight="Bold" Grid.Row="2" Checked="radiobuttonMirror_Checked">
                <ToggleButton.Template>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Canvas>
                            <Image Name="buttonImage" Opacity="0" Source="resources\A_16-round-button.png" />
                        </Canvas>
                        <ControlTemplate.Triggers>
                            <Trigger Property="ToggleButton.IsChecked" Value="true">
                                <Setter Property="Image.Opacity" TargetName="buttonImage" Value="1" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </ToggleButton.Template>
            </RadioButton>
            <RadioButton Name="radiobuttonOffMirror" AllowDrop="True" Canvas.Left="371" Canvas.Top="46" Height="22" Style="{StaticResource ToggleSwitchStyle}" Width="28" Content="Switch" ForceCursor="False" FontWeight="Bold" Grid.Row="2" Checked="radiobuttonMirror_Checked">
                <ToggleButton.Template>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Canvas>
                            <Image Name="buttonImage" Opacity="0" Source="resources\A_16-round-button.png" />
                        </Canvas>
                        <ControlTemplate.Triggers>
                            <Trigger Property="ToggleButton.IsChecked" Value="true">
                                <Setter Property="Image.Opacity" TargetName="buttonImage" Value="1" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </ToggleButton.Template>
            </RadioButton>
        </Canvas>
        <Canvas Margin="84,68,290,175">
            <RadioButton AllowDrop="True" Canvas.Left="64" Canvas.Top="12" Content="Switch" FontWeight="Bold" ForceCursor="False" Grid.Row="2" Height="25" Name="radioButtonPolarityWhiteHot" Style="{StaticResource ToggleSwitchStyle}" Width="64" HorizontalAlignment="Left" VerticalAlignment="Top" Checked="radioButtonPolarity_Checked">
                <RadioButton.Template>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Canvas Name="Polarity">
                            <Image Name="buttonImage" Source="resources\A_27-non-selected.png" />
                            <TextBlock VerticalAlignment="Center"  FontSize="12" Foreground="White" FontWeight="Normal" HorizontalAlignment="Center" TextWrapping="Wrap" Canvas.Left="4" Canvas.Top="5">White Hot</TextBlock>
                        </Canvas>
                        <ControlTemplate.Triggers>
                            <Trigger Property="ToggleButton.IsChecked" Value="true">
                                <Setter Property="UIElement.Opacity" TargetName="buttonImage" Value="1" />
                                <Setter Property="Source" TargetName="buttonImage" Value="Resources\A_27-selected.png" />

                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </RadioButton.Template>
            </RadioButton>
            <RadioButton AllowDrop="True" Canvas.Left="-2" Canvas.Top="12" Content="Switch" FontWeight="Bold" ForceCursor="False" Grid.Row="2" Height="25" Name="radioButtonPolarityBlackHot" Style="{StaticResource ToggleSwitchStyle}" Width="64" Checked="radioButtonPolarity_Checked">
                <RadioButton.Template>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Canvas Name="Polarity">
                            <Image Name="buttonImage" Source="resources\A_26-non-selected.png" />
                            <TextBlock VerticalAlignment="Center"  FontSize="12" Foreground="White" FontWeight="Normal" HorizontalAlignment="Center" TextWrapping="Wrap" Canvas.Left="10" Canvas.Top="5">Black Hot</TextBlock>
                        </Canvas>
                        <ControlTemplate.Triggers>
                            <Trigger Property="ToggleButton.IsChecked" Value="true">
                                <Setter Property="UIElement.Opacity" TargetName="buttonImage" Value="1" />
                                <Setter Property="Source" TargetName="buttonImage" Value="Resources\A_26-selected.png" />

                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </RadioButton.Template>
            </RadioButton>
            <Canvas Name="INtTime" ></Canvas>
        </Canvas>
    </Grid>
</UserControl>

Fitzgerald Muiseroux · Accepted Answer · 2013-10-09 15:39:52Z

1

When developping with XAML You should use ObservableCollection<> instead of List<> http://msdn.microsoft.com/en-us/library/ms668604.aspx. Why? because Observable collection whill notify a change everytime the collection is modified in order to refresh the view. It should look like this :

ObservableCollection<int> collection = new ObservableCollection<int>(); ListBox.DataSource = collection; for (int i = 0; i <= 15000; ) { collection.Add(i); i += 500; }
Now each time you call the add method the will be updated with the data

answered Oct 9, 2013 at 15:39

Fitzgerald Muiseroux

5223 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Will Custode · Accepted Answer · 2013-10-09 14:24:30Z

0

If you have a view model, you can use bindings to attach the data to the view like so:

ViewModel.cs

public class ViewModel
{
    public List<int> Items { get; set; }

    public ViewModel( )
    {
        Items = new List<int>( );
        for( int index = 0; index < 15000; index += 500 )
        {
            Items.Add( index );
        }
    }
}

View.xaml.cs

public partial class View : Window
{
    public View( )
    {
        this.DataContext = new ViewModel( );
    }
}

View.xaml

<ListBox ItemsSource="{Binding Items}" />

answered Oct 9, 2013 at 14:24

Will Custode

4,6343 gold badges28 silver badges52 bronze badges

1 Comment

crazyPixel Over a year ago

I dont, I have to finish up someone elses work, im new to wpf and I dont think he knew MVVM...

Nitin Purohit · Accepted Answer · 2013-10-09 14:54:02Z

0

Update your DataTemplate to have a control to show your values like i used TextBlock below

        <DataTemplate>

                <TextBlock Text="{Binding}"/>

        </DataTemplate>

edited Oct 9, 2013 at 14:54

answered Oct 9, 2013 at 14:24

Nitin Purohit

18.6k2 gold badges39 silver badges53 bronze badges

3 Comments

Nitin Purohit Over a year ago

can you share the whole xaml where your ListBox is

crazyPixel Over a year ago

take a look now...it didnt wanted to update since it was too long

Nitin Purohit Over a year ago

just update the datatemplate as in updated answer.. its the grid which is making it look bad

Collectives™ on Stack Overflow

Binding A data to WPF listbox on runtime

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related