Do List Boxes work?

25 Mar 2014, 15:58

I'm trying to do a simple listbox. The Expression Blend view displays the content but the Noesis XAML Player doesn't seem to display the content of the ListBox.

Code:
<ListBox HorizontalAlignment="Center" Margin="0" Width="200" VerticalAlignment="Center" Height="400">
<ListViewItem Content="ListViewItem" Width="150" Height="30"/>
<ListViewItem Content="ListViewItem" Width="150" Height="30"/>
<ListViewItem Content="ListViewItem" Width="150" Height="30"/>
</ListBox>

Thanks,
Rob

25 Mar 2014, 16:15

Oops, I found my mistake. Please disregard. Tried to put a ListViewItem instead of a ListBoxItem.

BUT, I'm still having an issue though. I'm trying to use a DataTemplate to create some interactive buttons that I can call as resources to ultimately dynamically populate in a ListBox. For now, I'm just trying to get the concept to work.

Here's my code:

(Here's my Data Template)
<DataTemplate x:Key="ModelLayerTemplate">
<Grid HorizontalAlignment="Left" Height="60" Margin="0,0,0,0" VerticalAlignment="Top" Width="168">
<Rectangle RadiusY="5" RadiusX="5" Fill="#BF6C87CC"/>
<TextBox x:Name="ModelNameTextBox" Margin="32.5,5,0,0" TextWrapping="Wrap" Text="Model Name" FontSize="12" Background="#FF5368A1" Foreground="#FFDADADA" Height="25" VerticalAlignment="Top" Width="130" HorizontalAlignment="Left" BorderBrush="{x:Null}"/>
<ComboBox x:Name="ModelTypeComboBox" Height="24" Margin="32,0,0,5" VerticalAlignment="Bottom" Width="79" HorizontalAlignment="Left">
<ComboBoxItem x:Name="ModelTypeBoxUpper" Content="Upper" IsSelected="True"/>
<ComboBoxItem x:Name="ModelTypeBoxLower" Content="Lower"/>
<ComboBoxItem x:Name="ModelTypeBoxBuccal" Content="Buccal"/>
</ComboBox>
<ToggleButton x:Name="ModelToggleVisibilityButton" Content="ToggleButton" HorizontalAlignment="Left" Margin="3,0,0,0" Style="{DynamicResource ToggleVisibilityEye}" Width="25" IsChecked="True" VerticalAlignment="Center" Height="25"/>
</Grid>
</DataTemplate>

(Here's the listbox I'm trying to call it in)
<ListBox ItemTemplate="{StaticResource ModelLayerTemplate}" HorizontalAlignment="Center" Margin="0" Width="200" VerticalAlignment="Center" Height="400">
<ListBoxItem ContentTemplate="{StaticResource ModelLayerTemplate}"/>
</ListBox>

Is this possible?

Thanks,
Rob

26 Mar 2014, 16:13

Hi Rob,

Based on your xaml, I tried two options to assign a DataTemplate to an item: using the ListBoxItem.ContentTemplate and using the ListBox.ItemTemplate; both worked well.

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Grid.Resources>
        <DataTemplate x:Key="ModelLayerTemplate">
            <Grid HorizontalAlignment="Left" Height="60" Margin="0,0,0,0" VerticalAlignment="Top" Width="168">
                <Rectangle RadiusY="5" RadiusX="5" Fill="#BF6C87CC"/>
                <TextBox x:Name="ModelNameTextBox" Margin="32.5,5,0,0" TextWrapping="Wrap" Text="Model Name" FontSize="12" Background="#FF5368A1" Foreground="#FFDADADA" Height="25" VerticalAlignment="Top" Width="130" HorizontalAlignment="Left" BorderBrush="{x:Null}"/>
                <ComboBox x:Name="ModelTypeComboBox" Height="24" Margin="32,0,0,5" VerticalAlignment="Bottom" Width="79" HorizontalAlignment="Left">
                    <ComboBoxItem x:Name="ModelTypeBoxUpper" Content="Upper" IsSelected="True"/>
                    <ComboBoxItem x:Name="ModelTypeBoxLower" Content="Lower"/>
                    <ComboBoxItem x:Name="ModelTypeBoxBuccal" Content="Buccal"/>
                </ComboBox>
                <ToggleButton x:Name="ModelToggleVisibilityButton" Content="X" HorizontalAlignment="Left" Margin="3,0,0,0" Style="{DynamicResource ToggleVisibilityEye}" Width="25" IsChecked="True" VerticalAlignment="Center" Height="25"/>
            </Grid>
        </DataTemplate>
    </Grid.Resources>

    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">

        <ListBox>
            <ListBoxItem Content="Hello" ContentTemplate="{StaticResource ModelLayerTemplate}"/>
        </ListBox>

        <ListBox ItemTemplate="{StaticResource ModelLayerTemplate}" Margin="0,10,0,0">
            <TextBlock Text="Item1"/>
        </ListBox>

    </StackPanel>

</Grid>

: ListBox_Template.png (4.78 KiB) Viewed 4185 times

Is this what you want to achieve?

26 Mar 2014, 16:56

Thanks, that worked! I see now that you have to add an item to make it work.

Ok, next problem, haha! The combo box drop-down is getting cut off and I can't type in the text box. Any suggestions? I'm playing around with the styling and triggers of the listbox.

26 Mar 2014, 22:29

A couple things to note. The Combobox and Textbox work fine inside a grid in the LayoutRoot. It's only when I put them in the DataTemplate and call them through the Listbox that they do not work. Also, they work in the Expression Blend player but do not in the Noesis XAML player. Is there something that the Blend player allows that the Noesis XAML player does not?

Thanks for your help!

Maddy123 · 27 Mar 2014, 00:21

Hello,

I am going to add one more question regarding this situation. I am trying to dynamically create ListBoxItem and apply DataTemplate (static resource) to that item. I dont want to apply DataTemplate to entire ListBox, but only to individual ListBoxItem. Can you give me any pointers?

Edit: I am trying something like following,

data_template_ = NsStaticCast<Noesis::Gui::DataTemplate*>(gui_root_->FindName("ModelLayerTemplate"))            
ListBoxItem* l = new ListBoxItem();          
        
l->SetTemplate((Noesis::Gui::ControlTemplate*)data_template_);
Noesis::Gui::TextBox* t  = NsStaticCast<TextBox*>(l->GetTemplateChild("ModelNameTextBox"));
t->SetText("abc");

listbox_->GetItems()->Add(l);

XAML is:

<DataTemplate x:Key="ModelLayerTemplate">
    <Grid Width="168" Height="60" Margin="0,0,0,0"
            HorizontalAlignment="Left" VerticalAlignment="Top">
        <Rectangle RadiusY="5" RadiusX="5" Fill="#BF6C87CC"/>
        <TextBox x:Name="ModelNameTextBox" Margin="32.5,5,0,0" TextWrapping="Wrap"
                Text="Model Name" FontSize="12" Background="#FF5368A1" Foreground="#FFDADADA" Height="25" 
                VerticalAlignment="Top" Width="130" HorizontalAlignment="Left" BorderBrush="{x:Null}"/>
        <ComboBox x:Name="ModelTypeComboBox" Height="24" Margin="32,0,0,5" 
                VerticalAlignment="Bottom" Width="79" HorizontalAlignment="Left">
            <ComboBoxItem x:Name="ModelTypeBoxUpper" Content="Upper" IsSelected="True"/>
            <ComboBoxItem x:Name="ModelTypeBoxLower" Content="Lower"/>
            <ComboBoxItem x:Name="ModelTypeBoxBuccal" Content="Buccal"/>
        </ComboBox>
        <ToggleButton x:Name="ModelToggleVisibilityButton" Content="ToggleButton" 
                HorizontalAlignment="Left" Margin="3,0,0,0" Style="{DynamicResource ToggleVisibilityEye}" 
                Width="25" IsChecked="True" VerticalAlignment="Center" Height="25"/>
    </Grid>
</DataTemplate>

Thanks.

28 Mar 2014, 23:25

A couple things to note. The Combobox and Textbox work fine inside a grid in the LayoutRoot. It's only when I put them in the DataTemplate and call them through the Listbox that they do not work. Also, they work in the Expression Blend player but do not in the Noesis XAML player. Is there something that the Blend player allows that the Noesis XAML player does not?

Thanks for your help!

I take note of the TextBox problem to solve it as soon as possible. It seems something related to focus, because when you click over the TextBox, the ListBoxItem gets selected, and it shouldn't.

What do you mean about the ComboBox not working? How the drop-down gets cut? Because this is what I see:

: ListBox_ComboBox.png (25.76 KiB) Viewed 4138 times

28 Mar 2014, 23:40

I am going to add one more question regarding this situation. I am trying to dynamically create ListBoxItem and apply DataTemplate (static resource) to that item. I dont want to apply DataTemplate to entire ListBox, but only to individual ListBoxItem. Can you give me any pointers?

Hi Maddy,

The code you pasted is not correct.

- To obtain a DataTemplate defined as a resource in the xaml, you have to use the FindResource() function:

data_template_ = gui_root->FindResource<Noesis::Gui::DataTemplate*>("ModelLayerTemplate");

- You cannot assign a DataTemplate (a template applied to custom data) to Control.Template property, which only accepts a ControlTemplate instance (a template applied to Controls).

If you want to provide a visual representation for your custom data, you should use a DataTemplate, and you can apply it to a specific ListBoxItem by setting its ContentTemplate property:

ListBoxItem* l = new ListBoxItem();          
        
l->SetContentTemplate(data_template_);
Noesis::Gui::TextBox* t  = NsStaticCast<TextBox*>(l->GetTemplateChild("ModelNameTextBox"));
t->SetText("abc");

listbox_->GetItems()->Add(l);

Do List Boxes work?

Do List Boxes work?

Re: Do List Boxes work?

Re: Do List Boxes work?

Re: Do List Boxes work?

Re: Do List Boxes work?

Re: Do List Boxes work?

Re: Do List Boxes work?

Re: Do List Boxes work?

Who is online