Develop Reference

How to access properties inside Listvew ItemsPanelTemplate and DataTemplate

I'm quite new to c# and WPF. I'm making a small Photo Viewer. I want to have a grid of photos in which I can change the number of columns and the size of the pictures depending on user preferences and the size of the screen. I can do everything I need at design time but I don't find how to change some properties during runtime.
In particular, I need to change the number of columns of the UniforGrid and the Width and Height of the Image.
<ListView x:Name="LVMiniaturasGrandes" Margin="23,10,464,270.5" Background="#FF272727" Foreground="White" Visibility="Hidden" BorderBrush="{x:Null}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="4" HorizontalAlignment="Stretch"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<ItemsControl Padding="10">
<StackPanel Orientation="Vertical" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Image Source="{Binding ImagenGrande2}" Width="200" Height="200" HorizontalAlignment="Stretch" VerticalAlignment="Top" Stretch="Uniform" />
<StackPanel Orientation="Horizontal" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<TextBlock Text="{Binding NombreFichero}" HorizontalAlignment="Left" VerticalAlignment="Bottom" Foreground="White" />
<TextBlock Text="{Binding VerEstrellas}" Foreground="Red" TextAlignment="Right" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
</StackPanel>
</StackPanel>
</ItemsControl>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I expect to be able both to change the number of columns and the height and width of the Image(s) depending on a slider control position and the actual pixel size of the screen.
Any help is welcome. Thanks in advance.
EDIT:
I've been able to modify the number of columns in the UniformGrid. It may not be very elegant but it works. But I'm still not able to access the Width and Height of the Images.
private void RejillaImagenesGrandes_Initialized(object sender, EventArgs e)
{
_UGImagenesGrandes = (UniformGrid)sender;
}
This way I can get access to the UniformGrid and modify the number of columns dynamically

How do I limit the Image size to its parent container

I am doing my first WPF-Project with the MVVM-Model. I have got two views that i want to look like that:
But sadly the images do not shrink to parent size, they stay in original size:
Views.PictureList
<UserControl x:Class="BIF.Views.PictureList"
xmlns:view="clr-namespace:BIF.Views"
d:DesignHeight="120" d:DesignWidth="300">
<ListBox ItemsSource="{Binding List}" <!-- List<PictureViewModel> -->
ScrollViewer.VerticalScrollBarVisibility="Hidden"
SelectedItem="{Binding CurrentPicture, Mode=TwoWay}" SelectionMode="Single">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<ListBoxItem>
<view:Picture DataContext="{Binding}" />
</ListBoxItem>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</UserControl>
Views.Picture
<UserControl x:Class="BIF.Views.Picture"
d:DesignHeight="200" d:DesignWidth="200">
<Border BorderBrush="Black" BorderThickness="1" CornerRadius="4">
<Image Source="{Binding FilePath}"/>
</Border>
</UserControl>
I have already tried to set height of view:Picture manualy by adding:
Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type StackPanel}}, Path=ActualHeight}"
But thats not working 100% correct and I also do not want to set a fix height, because I want the PictureList to be resizeable.
Any suggestions are welcome.

You have to set ScrollViewer.VerticalScrollBarVisibility to "Disabled" since the "Hidden" value gives the content infinite space in the vertical direction, that's all.

StackPanel does not limit the size of container and hence all the space is available to its child elements.
You should either set limits to your stack panel or use a better control for this case, may be a Grid.
Let me know if you need help in that.

Two litte changes and everything works wonderfull now.
ScrollViewer.VerticalScrollBarVisibility="Disabled"
No ListItem in the DataTemplate
<ListBox ItemsSource="{Binding List}" <!-- List<PictureViewModel> -->
ScrollViewer.VerticalScrollBarVisibility="Disabled"
SelectedItem="{Binding CurrentPicture, Mode=TwoWay}" SelectionMode="Single">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<!-- No ListItem here -->
<view:Picture DataContext="{Binding}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Thank you guys!

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.

Scrolling in a ItemsControl while using a horizontal StackPanel as the ItemsPanel

I have an ItemsControl, I've built the items that I'm displaying in it (views:DisplayGroupView) in such a way that they will expand horizontally to show all their contents and not vertically (only using the available height)
I've changed my ItemsPanel of the ItemsControl to use a StackPanel with Orientation="Horizontal"
Layout wise it's perfect, but no matter what I do I can't get it to scroll horizontally so I can see everything.
This is the XAML for the ItemsControl:
<ItemsControl ItemsSource="{Binding DisplayGroups}" Grid.Row="1" Margin="120,20,120,20" VerticalContentAlignment="Stretch">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate >
<StackPanel Orientation="Horizontal" ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.HorizontalScrollBarVisibility="Visible"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<views:DisplayGroupView Margin="0,0,20,0" DataContext="{Binding}" VerticalAlignment="Stretch"></views:DisplayGroupView>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
This lays everything out okay, but won't scroll. I've also tried changing the ItemsControls template to include a scrollviewer, but this only stacks things vertically:
<ItemsControl.Template>
<ControlTemplate>
<ScrollViewer x:Name="ScrollViewer" Padding="{TemplateBinding Padding}" VerticalContentAlignment="Stretch" ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.VerticalScrollMode="Disabled">
<ItemsPresenter VerticalAlignment="Stretch"/>
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
How can I get the horizontal layout while still being able to scroll?

If you pull it out of the ItemsControl and embed it by itself, for some reason that often acts as a workaround so something like;
<ScrollViewer VerticalScrollBarVisibilty="Disabled" HorizontalScrollBarVisibility="Auto">
<ItemsControl/>
</ScrollViewer>

Tile Grid with Bindings?

OK, what I'm trying to do is fairly simple :
I'm getting a list of images (using bindings) which I'm trying to display in a table-like grid (like 3 images per row)
How can this be done?
<ListBox.ItemTemplate>
<DataTemplate>
<Image Height="100" Width="100" Margin="12,0,9,0" Source="{Binding AlbumArt}"/>
</DataTemplate>
</ListBox.ItemTemplate>
This way, the images are property display, but not the way I want them to - they are display one below the other and not like :
A B C
D E F
G H I
How can this be done? Any ideas?

A great solution would be using UniformGrid with its columns property and ItemsControl.
Example:
<ItemsControl ItemsSource="{Binding AlbumArt}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="3"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Height="100" Width="100" Margin="12,0,9,0" Source="{Binding}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
This way you will get the desired result. Read more about UniformGrid here: MSDN
The reason why your solution does not work, is that Listbox panel puts items one under another, whereas UniformGrid puts them from left to right, until there is available space or has hit the columns limit and then goes down the row.

You can use two StackPanels, one with verticle orientation and one with horizontal. Here's your code edited to include them:
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Verticle">
<StackPanel Orientation="Horizontal">
<Image Height="100" Width="100" Margin="12,0,9,0" Source="{Binding AlbumArt}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>