Develop Reference

ItemSource of Listbox is not updated on item change

In my WPF application I have ListBox which contains a collection of items. One item can be added when a button is clicked and it is selected in the opened dialogue. As soon as a item is selected the dialogue closes and the item's image and name should be displayed in my ListBox. Unfortunately the Listbox does not update and nothing changes.
Usercontrol with Listbox:
<ListBox ItemsSource="{Binding BlButtonCollection, UpdateSourceTrigger=PropertyChanged}" VerticalContentAlignment="Stretch" SelectedItem="{Binding SelectedSticker}"
HorizontalContentAlignment="Stretch" ItemContainerStyle="{StaticResource ListBoxItemStyle}">
<ListBox.Resources>
<viewmodels1:BindingProxy x:Key="ProxyElement" Data="{Binding}" />
</ListBox.Resources>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="4" Rows="10"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="1">
<Grid x:Name="f">
<Grid.RowDefinitions>
<RowDefinition Height="5*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button x:Name="btnSelectArticle" Background="Transparent" Grid.RowSpan="2" BorderThickness="0"
Command="{Binding DataContext.ButtonClicked,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type ListBox}}}"/>
<Image Height="1.5cm" HorizontalAlignment="Center" Source="{Binding ItemImage.ImageUrl, Converter={StaticResource ImageFormatConverter}}"/>
<TextBlock Text="{Binding ItemName}" Width="4cm" Height="0.8cm" TextWrapping="Wrap" Grid.Row="1" HorizontalAlignment="Center"/>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Controls with ListBoxes in main window:
<formats:OneXTwo x:Name="oneXTwo" BlButtonCollection="{Binding BlButtons_2}" IsBlVisible="Visible" Visibility="{Binding Are2StickersVisible}"
ButtonClicked="{Binding BlStickerButtonClickedCommand}"/>
<formats:ThreeXEight x:Name="threeXEight" BlButtonCollection="{Binding BlButtons_24}" IsBlVisible="Visible" Visibility="{Binding Are24StickersVisible}"
ButtonClicked="{Binding BlStickerButtonClickedCommand}"/>
<formats:FourXTen x:Name="fourXTen" BlButtonCollection="{Binding BlButtons_40, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" IsBlVisible="Visible" Visibility="{Binding Are40StickersVisible}"
ButtonClicked="{Binding BlStickerButtonClickedCommand}" SelectedSticker="{Binding SelectedBlSticker, Mode=TwoWay}" />
I should mention that I have three different formats and each format is a own user-control. Therfore, they are displayed in a shell-view and based on a ComboBox selection one format is displayed. If I am running the application, select a image nothing happens, but if I change the bound value of the textblock in the list view and switch it back to 'Itemname' the Image and Name are displayed.

Have you set the DataContext to a specific ViewModel?
ObservableCollection can only ensure the add/remove operation for items that can be updated to the UI. If you want to the item property to notify the UI, you should override the setter of the property and implement INotifyPropertyChanged.

WPF ItemTemplate Causing ListBox Content Size Issue

In a WPF project, I have a ListBox that renders correctly if I manually insert items in XAML, e.g.:
<ListBoxItem>
<Grid Background="#7F271043" Width="200" Height="200">
<Grid.RowDefinitions>
<RowDefinition Height="110" />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="Logo-40p.png" HorizontalAlignment="Center" Margin="10,10,10,10" />
<TextBlock Grid.Row="1" Text="Test Item" Foreground="White" Margin="10,0,10,0" FontSize="16" VerticalAlignment="Center" />
<local:Rating Grid.Row="2" HorizontalAlignment="Left" Height="24" Margin="10,0,0,0" VerticalAlignment="Center" Width="130" SelectedValue="4" IsReadOnly="True" />
<TextBlock Grid.Row="2" Text="Free" Foreground="#FF969292" Margin="0,0,10,0" FontSize="14" HorizontalAlignment="Right" VerticalAlignment="Center" />
</Grid>
</ListBoxItem>
The bottom of the ListBoxItem looks like:
However, the moment I swap out <ListBoxItem> for:
<ListBox.ItemTemplate>
<DataTemplate>
Even if I keep everything else identical, it creates a sizing problem with my rating control that I'm unable to fix (doesn't respond to manual size or stretch settings):
Any thoughts on how to address this? Do ItemTemplate / DataTemplate do something that might cause a control to not respect the size manually set or set by the grid row it's in?

Managed to fix this - it seems that a manually defined ListBoxItem in XAML behaves differently from the output of an ItemTemplate / DataTemplate.
My rating user control had a set height and width specified that were overridden by the implementation XAML (height/width/stretch) inside a ListBoxItem but not inside a ItemTemplate / DataTemplate:
mc:Ignorable="d" Height="750" Width="4070" MouseLeave="UserControl_MouseLeave">
So I instead changed Height / Width to DesignHeight / DesignWidth to fix the issue:
mc:Ignorable="d" d:DesignHeight="750" d:DesignWidth="4070" MouseLeave="UserControl_MouseLeave">

UWP FlipView height/vertical next button issue

I am trying to get a FlipView streched to the height of its parent view. The XAML look like this:
<StackPanel Orientation="Vertical">
<FlipView x:Name="flipView"
BorderBrush="Black" BorderThickness="1"
VerticalAlignment="Stretch"
SelectionChanged="FlipView_SelectionChanged" >
<!-- Use a vertical stack panel for vertical flipping. -->
<FlipView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</FlipView.ItemsPanel>
</FlipView>
<TextBlock x:Name="textOutput" Text="Hello"></TextBlock>
</StackPanel>
The children of the FlipView were added in C#:
var image1 = await MakeImageForPageIndex(1);
var image2 = await MakeImageForPageIndex(2);
flipView.Items.Add(image1);
flipView.Items.Add(image2);
As you can see in the screenshot the vertical next button and the bottom border are clipped.
I have tried setting VerticalAlignment of the FlipView to Strech with no luck. Setting the images a small Height didn't help either.
I have also tired Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ActualHeight}" from this question
Thank you all!

StackPanel stacks its children in one direction (vertical in this case), its size grows with its children, it does not define a bound for its children.
Use a Grid to replace the StackPanel.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<FlipView x:Name="flipView" />
<TextBlock Grid.Row="1" />
</Grid>

Windows Store App - XAML UI element not visible in C# code

I have the following XAML code and the only element available in the C# code behind are the Grid and the FlipView. How can I make the ScrollViewer, Image or the Viewbox visibile in the code?
XAML:
<Grid x:Name="gridViewPages">
<FlipView x:Name="FlipView1" Loaded="FlipView1_Loaded" Style="{StaticResource FlipViewPreviewIndicator}" Tapped="FlipView1_Tapped">
<FlipView.ItemTemplate>
<DataTemplate>
<ScrollViewer x:Name="pagesScrollViewer" ZoomMode="Enabled"
HorizontalAlignment="Center"
VerticalAlignment="Center"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden"
MinZoomFactor="1.0"
MaxZoomFactor="3.0"
Margin="0"
Width="1500" DoubleTapped="PagesScrollViewer_DoubleTapped">
<Viewbox x:Name="pagesViewbox">
<Image Source="{Binding}"
Height="730"
x:Name="pageImage" Stretch="Uniform" Loaded="MainImage_Loaded"/>
</Viewbox>
</ScrollViewer>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
</Grid>
The flipview is customized and contains also a listview defined in which is not visible in the code too...:
<Page.Resources>
...
<ListView x:Name="pagesPreview" HorizontalAlignment="Center" Height="100" VerticalAlignment="Bottom" Width="Auto"
ItemsSource="{TemplateBinding ItemsSource}"
SelectedItem="{Binding SelectedItem, Mode=TwoWay, RelativeSource={RelativeSource Mode=TemplatedParent}}"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ScrollViewer.HorizontalScrollMode="Enabled"
ScrollViewer.VerticalScrollMode="Disabled"
Background="AliceBlue"
Opacity="1"
SelectionChanged="pagesPreview_SelectionChanged"
Visibility="Visible">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Image Source="{Binding}" Stretch="UniformToFill"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
...
</Page.Resources>

See the basic concept of the flipview is to have multiple pages to have a flip effect. So whatever the Data template contains is repeated multiple times. So if you want the x:Name to come up then you wont have any success.
There are two ways As per my knowledge :
VisualTreeHelper -> for a better detail of it go through this link
Get elements from data template
you can manually iterate over the flipview elements and track down the children of the flipview. Try that in debug mode you'll get a fair idea of what comes after what. Just keep track of the element at which selected index position you want modified
Thanks.

WPF Issues with Control Layout

I am making an application that connects to our billing software using its API, and I am running into a few issues getting the layout working properly.
I want to make it so that when one of the expanders is minimized, the other window fills the gap, and when it is expanded again the other expander goes back to where it was. Right now when the arrow is clicked on one, there is just an empty gap. I used a DockPanel as the parent which I assumed would automatically do this, but it isn't working.
Second question, is there a way to make these areas resizable? I don't want to try and get too frisky with allowing the user to undock the menus (don't even know if that is possible with just straight WPF) but it would be nice if they could change the width/height of them.
Also, just a newbie question to C#, but what is the equivalent of a C++ header file? It looks like you just use .cs files, but I am not sure. I want to extract all of my functions that pull the data from the billing software and put them into a different file to clean up the code.
Here is my XAML...
<Window x:Class="WpfApplication3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Billing Management" Height="550" Width="754" xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared" WindowStartupLocation="CenterScreen" WindowStyle="ThreeDBorderWindow">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="22" />
<RowDefinition />
</Grid.RowDefinitions>
<Menu Height="22" Name="menu1" Margin="0" HorizontalAlignment="Stretch" VerticalAlignment="Top" HorizontalContentAlignment="Left" IsEnabled="True" IsMainMenu="True">
<MenuItem Header="_File">
<MenuItem Header="_Open" />
<MenuItem Header="_Close" />
<Separator/>
<MenuItem Header="_Exit" />
</MenuItem>
</Menu>
<TabControl Name="tabControl1" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" BorderThickness="1" Padding="0" TabStripPlacement="Bottom" UseLayoutRounding="False" FlowDirection="LeftToRight" Grid.Row="1">
<TabItem Header="Main" Name="tabItem1" Margin="0">
<DockPanel Name="dockPanel1" LastChildFill="True">
<ListBox Height="100" Name="listBox3" DockPanel.Dock="Top" />
<ListBox Name="listBox4" Width="200" DockPanel.Dock="Right" />
<DockPanel Height="Auto" Name="dockPanel2" Width="Auto" VerticalAlignment="Stretch" LastChildFill="True">
<shared:AnimatedExpander Header="Staff Online" Width="200" Name="expanderStaffOnline" IsExpanded="True" Height="194" BorderThickness="0" DockPanel.Dock="Top" VerticalContentAlignment="Stretch">
<ListBox Name="listboxStaffOnline" Width="Auto" Height="Auto" Margin="0" VerticalAlignment="Stretch" Loaded="listboxStaffOnline_Loaded" />
</shared:AnimatedExpander>
<shared:AnimatedExpander Header="Test Menu 2" Height="Auto" Name="animatedExpander1" BorderThickness="1" Margin="0,0,0,0" IsExpanded="True" VerticalContentAlignment="Stretch">
<ListBox Height="Auto" HorizontalAlignment="Stretch" Name="listBox6" VerticalAlignment="Stretch" Margin="0" BorderThickness="1" />
</shared:AnimatedExpander>
</DockPanel>
<ListBox Height="100" Name="listboxAdminLogs" DockPanel.Dock="Bottom" Loaded="listboxAdminLogs_Loaded" />
<ListBox Name="listBox5" />
</DockPanel>
</TabItem>
<TabItem Header="Support" Name="tabItem2" Margin="0">
</TabItem>
<TabItem Header="Clients" />
<TabItem Header="Billing" />
<TabItem Header="Orders" />
</TabControl>
</Grid>
</Window>

You should place your expanders in a Grid which will allow the content to expand and fill automatically. providing the Row / Column definitions width / height are set to Auto or *.
If you want to resize you will need to use the GridSplitter; see http://www.wpftutorial.net/GridLayout.html for further details.
I don't know C++ so can't really tell you want the equivalent of header files are but I think what you are trying to do is achievable using partial classes; see http://msdn.microsoft.com/en-us/library/wa80x488(v=vs.80).aspx for further details.
And finally, to answer your question in your comments; To get a uniform appearance for all controls in WPF you would need to create custom Styles which use a common set of Colors / Brushes.

I suggest you put the expanders in a Grid and set the row height of the gridrows to auto.
To make it resizable simply add GridSplitters in inbetween rows of this grid.
As for your added question: I think it would be better to copy the style of the expanders' headers and use it for a label or other header.
Also (many questions in this one): C# has no header files.