Develop Reference

WrapPanel unnecessarily moving items

I have a ListBox that needs to show more than one item per row if there's room for it. I've tried to use WrapPanel as common solution but it's moving all items to the first row. This is the XAML I'm using.
<Border CornerRadius="0.5" Background="#FEFEFE" BorderThickness="0" Margin="20">
<Border.Effect>
<DropShadowEffect BlurRadius="4" Color="#000000" Opacity="14" ShadowDepth="0" Direction="0" />
</Border.Effect>
<ListBox x:Name="listaAtletas" Background="Transparent" BorderThickness="0" Margin="0" Padding="0" HorizontalContentAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Hidden">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" IsItemsHost="True" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid MinWidth="350" Height="100">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Source="{Binding Imagem}" Width="40" Height="40" Grid.Column="0" />
<StackPanel Orientation="Vertical" Grid.Column="1" >
<ContentControl Content="{Binding Nome}"/>
<TextBlock Text="{Binding Nascimento}" HorizontalAlignment="Left" />
<TextBlock Text="{Binding Status}" HorizontalAlignment="Left" />
<TextBlock Text="{Binding Modalidades}" HorizontalAlignment="Left" />
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="2" >
<Button x:Name="EditButton" Content="E" Width="20" Height="20" />
<Button x:Name="DeleteButton" Content="X" Width="20" Height="20" />
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Border>
The ListBox if filled dynamically after reading a file. Is there something wrong with this piece of code?

Set the HorizontalScrollBarVisibility property to Disabled instead of Hidden:
<ListBox ... ScrollViewer.HorizontalScrollBarVisibility="Disabled">
...
</ListBox>

Get current row number of a dynamically generated button in a TreeView HierarchicalDataTemplate

Below Is my Code
I tried the method below, but for every button I get the same row number: 0, I think that is because the first button is default placed at 0th row.
Button btn = sender as Button;
if (btn != null) {
row = Grid.GetRow(btn); // And you have the row number...
}
<TreeViewItem Header="Group by:">
<TreeView Name="TestTreeView" HorizontalAlignment="Stretch" BorderBrush="Transparent"
BorderThickness="0"
ScrollViewer.VerticalScrollBarVisibility="Auto" >
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type mdl:TaggedCheckBox}"
x:Name="Dispterrs1" ItemsSource="{Binding OrderOfGroup}">
<StackPanel Orientation="Horizontal" x:Uid="TreeStackPanel" x:Name="TreeStackPanel" >
<Grid Name="grd_stack">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20*" />
<ColumnDefinition Width="20*" />
<ColumnDefinition Width="30*" />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Button Style="{StaticResource ButtonStyle}" Grid.Column="0" Height="8" Width="15" Margin="10,0,0,0" x:Name="btnUp" Tag="{Binding TagName}" Click="btnUP_Click">
<Image Source="..\images\up_arrow.png" />
</Button>
<Button Style="{StaticResource ButtonStyle}" Grid.Column="1" Height="8" Width="15" Margin="10,0,0,0" x:Name="btnDown" Tag="{Binding TagName}" Click="btnDown_Click">
<Image Source="..\images\down_arrow.png" />
</Button>
<CheckBox Margin="3,3,0,0" x:Name="cb_TechTerrs" Grid.Column="2"
Tag="{Binding TagName}"
IsChecked="{Binding IsChecked}"></CheckBox>
<TextBlock Margin="5,3,0,0" x:Name="tbTechTerrs" Grid.Column="4" Text="{Binding TagName}"></TextBlock>
</Grid>
</StackPanel>
</HierarchicalDataTemplate>
</TreeView.Resources>
<TreeView.ItemContainerStyle>
<Style TargetType="TreeViewItem">
<Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}"/>
</Style>
</TreeView.ItemContainerStyle>
</TreeView>
</TreeViewItem>

WPF XAML Custom Listbox Does Not Position Elements Correctly

I am trying to implement a custom multi-page dialog that takes an arbitrary number of visuals (slides) and displays them. The desired behavior would be that the selected item would appear at the top-center of the display area in the foreground. The previous slide would be at the bottom-left with a lower z-index, and the next slide would be at the bottom-right with a lower z-index. "Previous" and "Next" buttons would set the selected index. In the set method for the index, I loop through the slides and set an integer value called "SelectionState" based on whether each slide is hidden, selected, just before the selected one, or just after the selected one. I am trying to position the slides based on this integer using IValueConverters.
For my Listbox.ItemsPanelTemplate, I tried using a Grid. In the ItemsTemplate, I was setting the Grid.Column and Grid.Row using IValueConverters. Stepping through code, I can see that the value converters are being called, and that they are returning appropriate values, but all items appear in row 0, column 0 anyway.
After getting frustrated, I tried changing the Grid to a Canvas and setting the Canvas.Left and Canvas.Top properties, and again, I can see that I am getting good values back from the converter, but all items position themselves in the top-left corner anyway. (This code is shown, but commented out)
Since I know the value converters are behaving as expected, does anybody else see what I am doing wrong? Thank you in advance for any suggestions!
<Grid x:Name="DialogLayer">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="420" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="1100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ListBox x:Name="lbSlides" ItemsSource="{Binding CurrentFormSet.InterviewSlides}" Grid.Column="1" Grid.Row="1" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Hidden">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250" />
<ColumnDefinition Width="250" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="250" />
<ColumnDefinition Width="250" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60" />
<RowDefinition Height="300" />
<RowDefinition Height="60" />
</Grid.RowDefinitions>
</Grid>
<!--<Canvas Grid.Row="1" Grid.Column="1" />-->
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<!--<Border BorderBrush="Black" BorderThickness="1" Width="600" Height="360" Canvas.Top="{Binding SelectionState, Converter={StaticResource SelectionStateToCanvasTopConverter}}" Canvas.Left="{Binding SelectionState, Converter={StaticResource SelectionStateToCanvasLeftConverter}}" Panel.ZIndex="{Binding SelectionState, Converter={StaticResource SelectionStateToZIndexConverter}}">
<TextBlock Text="Hello World" />
</Border>-->
<Border BorderBrush="Black" BorderThickness="1" Width="600" Height="360" Grid.Column="{Binding SelectionState, Converter={StaticResource SelectionStateToGridColumnConverter}}" Grid.Row="{Binding SelectionState, Converter={StaticResource SelectionStateToGridRowConverter}}" Panel.ZIndex="{Binding SelectionState, Converter={StaticResource SelectionStateToZIndexConverter}}">
<TextBlock Text="Hello World" />
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>

You have to set those properties on the item container (i.e. the ListBoxItem) by setting the ItemContainerStyle property:
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Grid.Column" Value="{Binding SelectionState, ...}"/>
<Setter Property="Grid.Row" Value="{Binding SelectionState, ...}"/>
<Setter Property="Panel.ZIndex" Value="{Binding SelectionState, ...}"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="1" Width="600" Height="360">
<TextBlock Text="Hello World" />
</Border>
</DataTemplate>
</ListBox.ItemTemplate>

ListViewItem is not expanding to the width of the page

I am defining a ListView like this:
<DataTemplate x:Key="LibraryItemTemplate">
<Grid Height="191"
UseLayoutRounding="True">
<Grid.Background>
<ImageBrush Stretch="Fill"
ImageSource="Assets/BookShelf.jpg" />
</Grid.Background>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid x:Name="gridTitle"
Background="{Binding Text, Converter={StaticResource LibraryItemBackgroundConverter}, ElementName=tbTitle}"
Margin="6,4,6,13">
<TextBlock x:Name="tbTitle"
TextWrapping="Wrap"
VerticalAlignment="Center"
RenderTransformOrigin="0.5,0.5"
Width="100"
Margin="0,0,0,0.2"
TextAlignment="Center"
FontSize="24"
FontWeight="Bold"
UseLayoutRounding="False"
d:LayoutRounding="Auto">
<TextBlock.RenderTransform>
<CompositeTransform Rotation="-90" />
</TextBlock.RenderTransform>
<Run Text="{Binding Title}" />
</TextBlock>
</Grid>
<Grid x:Name="gridBooks"
Grid.Column="1"
Margin="0">
<GridView x:Name="booksGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
ItemsSource="{Binding Items}"
ItemTemplateSelector="{StaticResource textbookTemplateSelector}"
SelectionMode="Multiple"
IsItemClickEnabled="True"
ItemClick="booksGridView_ItemClick"
SelectionChanged="booksGridView_SelectionChanged"
IsSwipeEnabled="false"
ScrollViewer.VerticalScrollBarVisibility="Auto">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</Grid>
</Grid>
</DataTemplate>
<Grid Grid.Row="1"
Margin="80,0,12,0">
<ListView x:Name="libraryListView"
AutomationProperties.AutomationId="VideoListView"
AutomationProperties.Name="Videos"
TabIndex="1"
Padding="0,0,4,0"
ItemsSource="{Binding}"
IsSwipeEnabled="False"
SelectionChanged="LibraryListView_SelectionChanged"
ItemTemplate="{StaticResource LibraryItemTemplate}"
ItemContainerStyle="{StaticResource LibraryListViewItemStyle}">
</ListView>
</Grid>
The problem I am having is that each ListViewItem has different width, based on the number of elements in the GridView.
How can I force each ListViewItem to use the maximum width of the screen (so that the "Assets/BookShelf.jpg" will be the same for each of the ListViewItems).
Please see the attached image to better demonstrate my problem.
Thanks

To give you the best answer I would need a dummy screenshot of the expected layout, but it sound like you want the right column to stretch, which would be accomplished by setting its width to star (*) instead of Auto (which takes up only the space needed).
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" /> <!-- ONLY TAKE UP SPACE NEEDED -->
<ColumnDefinition Width="*" /> <!-- TAKE UP ALL AVAILABLE SPACE -->
</Grid.ColumnDefinitions>

The answer is with this code:
<ListView ..>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalAlignment" Value="Strech" />
.
.
.
.
<Setter Property="HorizontalContentAlignment" Value="Strech" />
</Style>
</ListView.ItemContainerStyle>
...
</ListView>
In this code we set the ItemContainerStyle: HorizontalAlignment = "Strech" and HorizontalContentAlignment = "Strech" and it made the trick.

Create WPF Hierachical TreeView without Creating the template in Resource

I want to create a TreeView that is hierarchical. But I don't want to create the ItemsTemplate in the < StackPanel.Resources > because that will affect my virtualization. That is to say, I don't want to use ItemsSource="{Binding Source={StaticResource dataItems}} in the TreeView. Here is my XAML. Could someone suggest another way to create a TreeView with an ItemsTemplate so that I can preserve virtualization?
<StackPanel>
<StackPanel.Resources>
<exportImport:TreeViewDashboard x:Key="dataItems"/>
<HierarchicalDataTemplate DataType="{x:Type exportImport:TreeViewDashboard}"
ItemsSource="{Binding Path=Components}">
<Grid Margin="2" >
<Grid.ColumnDefinitions>
<ColumnDefinition ></ColumnDefinition>
<ColumnDefinition ></ColumnDefinition>
<ColumnDefinition ></ColumnDefinition>
</Grid.ColumnDefinitions>
<CheckBox Name="checkbx" Grid.Column="0" Margin="2"
Tag="{Binding Path=Tag}"
Checked="OnCheck" Unchecked="OnUnCheck"></CheckBox>
<Image Margin="2" Grid.Column="1" Source="{Binding Path=ImageUrl}"
Height="14" Width="16" ></Image>
<TextBlock Margin="2" Grid.Column="2" Text="{Binding Path=Name}"
FontWeight="Bold" />
</Grid>
<HierarchicalDataTemplate.ItemTemplate>
<DataTemplate>
<Grid Margin="2" >
<Grid.ColumnDefinitions>
<ColumnDefinition ></ColumnDefinition>
<ColumnDefinition ></ColumnDefinition>
<ColumnDefinition ></ColumnDefinition>
</Grid.ColumnDefinitions>
<CheckBox Name="checkbx" Grid.Column="0" Margin="2"
Tag="{Binding Path=Tag}"
Checked="OnCheck" Unchecked="OnUnCheck"/>
<Image Margin="2" Grid.Column="1"
Source="{Binding Path=ImageUrl}"
Height="14" Width="16" />
<TextBlock Margin="2" Grid.Column="2"
Text="{Binding Path=Name}" FontWeight="Bold" />
</Grid>
</DataTemplate>
</HierarchicalDataTemplate.ItemTemplate>
</HierarchicalDataTemplate>
</StackPanel.Resources>
<TreeView Name="tvES" BorderThickness="0"
ItemsSource="{Binding Source={StaticResource dataItems}}"
VirtualizingStackPanel.IsVirtualizing="True"
VirtualizingStackPanel.VirtualizationMode="Recycling"
TreeViewItem.Expanded="item_Expanded"
TreeViewItem.Collapsed="item_Collapsed" >
<TreeView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel/>
</ItemsPanelTemplate>
</TreeView.ItemsPanel>
<TreeView.ItemContainerStyle>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="IsExpanded" Value="False" />
</Style>
</TreeView.ItemContainerStyle>
</TreeView>
</StackPanel>