Binding to a TextBox inside a Style for a ListBoxItem
Posted: 30 May 2014, 02:25
Hi!
I'm having a bit of trouble adding items to a listbox for which I've made an item style.
The idea is that a TextBox contained within the style should be bound to a property of my data items, in this case ModelName. I set the binding to ModelName inside the TextBox, set the ItemsSource property for the ListBox, as well as the item container style, and a DataContext containing items which expose a ModelName property, but this approach is failing. The listbox does get populated as I add items to it, but my textboxes are blank. I tried using a two-way binding, but that did not work either.
To start with, here is my list box item style:
... and here is the ListBox to whose items it is applied ...
Here are my data context and items wrapper classes:
and here is where I initialize my listbox, set data context and item style:
When I add items, I do the following:
This creates a new DataItem with a ModelName property, which should be bound to the textbox. However, I cannot get this to work. If I use a DataTemplate rather than a Style, the binding works, but I have other problems.
Any ideas?
Thanks
I'm having a bit of trouble adding items to a listbox for which I've made an item style.
The idea is that a TextBox contained within the style should be bound to a property of my data items, in this case ModelName. I set the binding to ModelName inside the TextBox, set the ItemsSource property for the ListBox, as well as the item container style, and a DataContext containing items which expose a ModelName property, but this approach is failing. The listbox does get populated as I add items to it, but my textboxes are blank. I tried using a two-way binding, but that did not work either.
To start with, here is my list box item style:
Code: Select all
<Style x:Key="ListBoxItemModelLayerStyle" TargetType="{x:Type ListBoxItem}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="Padding" Value="2,0,0,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Grid x:Name="GridTemplate" HorizontalAlignment="Stretch" Height="60" Margin="0" VerticalAlignment="Top" Width="168" Visibility="Visible">
<Rectangle x:Name="RectangleTemplate" RadiusY="5" RadiusX="5" Fill="#BF6C87CC"/>
<TextBox x:Name="ModelNameTextBoxTemplate" Margin="32.5,5,0,0" TextWrapping="Wrap" Text="{Binding ModelName}" FontSize="12" Background="#FF5368A1" Foreground="#FFDADADA" Height="25" VerticalAlignment="Top" Width="130" HorizontalAlignment="Left" BorderBrush="{x:Null}"/>
<ComboBox x:Name="ModelTypeComboBoxTemplate" Height="24" Margin="32,0,0,5" VerticalAlignment="Bottom" Width="79" HorizontalAlignment="Left" Background="#FF6781C3" Foreground="Black" BorderBrush="{x:Null}">
<ComboBoxItem x:Name="ModelTypeBoxUpperTemplate" Content="Upper"/>
<ComboBoxItem x:Name="ModelTypeBoxLowerTemplate" Content="Lower"/>
<ComboBoxItem x:Name="ModelTypeBoxBuccalTemplate" Content="Buccal"/>
</ComboBox>
<ToggleButton x:Name="ModelToggleVisibilityButtonTemplate" Content="ToggleButton" HorizontalAlignment="Left" Margin="3,0,0,0" Style="{DynamicResource ToggleVisibilityEye}" Width="25" IsChecked="True" VerticalAlignment="Center" Height="25"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Code: Select all
<ListBox x:Name="ItemLayersListBox" ItemsSource="{Binding Items}" HorizontalAlignment="Center" Margin="0" Width="200" VerticalAlignment="Center" MaxHeight="720" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Hidden" MinHeight="200">
<ListBoxItem Content="ModelLayer" Style="{DynamicResource ListBoxItemModelLayerStyle}"/>
</ListBox>
Code: Select all
class DataModel : public Noesis::Core::BaseComponent
{
public:
DataModel() : items_(new Noesis::Gui::Collection())
{ }
~DataModel()
{
}
Noesis::Gui::Collection* GetItems() const { return items_; }
private:
Noesis::Gui::Collection* items_;
NS_IMPLEMENT_INLINE_REFLECTION(DataModel, Noesis::Core::BaseComponent)
{
NsMeta<Noesis::Core::TypeId>("DataModel");
NsProp("Items", &DataModel::GetItems);
}
};
Code: Select all
struct DataItem : public Noesis::Core::BaseComponent
{
DataItem(const NsChar* n) :
name_(n)
{
}
NsString name_;
NsString type_;
NS_IMPLEMENT_INLINE_REFLECTION(DataItem, Noesis::Core::BaseComponent)
{
NsMeta<Noesis::Core::TypeId>("DataItem");
NsProp("ModelName", &DataItem::name_);
}
};
Code: Select all
auto list_box = NsStaticCast<ListBox*>(gui_root_->FindName(LISTBOX_NAME.c_str()));
data_model_ = new DataModel();
Ptr<IResourceKey> key = ResourceKeyString::Create("ListBoxItemModelLayerStyle");
Noesis::Gui::Style* style = gui_root_->FindResource<Noesis::Gui::Style>(key.GetPtr());
list_box->SetDataContext(data_model_);
list_box->SetItemContainerStyle(style);
Code: Select all
data_model_->GetItems()->Add(new DataItem(_name.c_str()));
Any ideas?
Thanks