I want to add images to a ListView. I have converted image to BitmapImage. I have collection of objects that contain Image property which is bind to DataTemplate.
<UserControl.Resources>
<DataTemplate x:Key="ImageCell">
<StackPanel Orientation="Horizontal">
<Image Source="{Binding DocumentPicture,UpdateSourceTrigger=PropertyChanged}"
Stretch="Fill" IsEnabled="True" Visibility="Visible"/>
</StackPanel>
</DataTemplate>
</UserControl.Resources>
<ListView Name="lstView" Grid.Column="0" Grid.Row="3" Margin="5" Height="90" Width="Auto"
ItemsSource="{Binding ListDocuments ,UpdateSourceTrigger=PropertyChanged}" ItemTemplate="
{StaticResource ImageCell}" BorderThickness="1" Style="{x:Null}" SelectedItem="{Binding
SelectedLstImage}" >
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Style="{x:Null}"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
It gives me this output : ( Do not worry about the red background that i set to identify the images in the list. )
Remove both the instances of ,UpdateSourceTrigger=PropertyChanged from your bindings. They're doing nothing.
Remove the stackpanel around the image. That's doing nothing.
Make the listview a listbox. Give the image a width.
Check the names of the things you're binding.
Ensure DocumentPicture is set to something and it's really a public bitmapimage property
<UserControl.Resources>
<DataTemplate x:Key="ImageCell">
<Image Source="{Binding DocumentPicture}"
Width="80"
Stretch="Fill" IsEnabled="True" Visibility="Visible"/>
</DataTemplate>
</UserControl.Resources>
<ListBox Name="lstView" Grid.Column="0" Grid.Row="3" Margin="5" Height="90" Width="Auto"
ItemsSource="{Binding ListDocuments}" ItemTemplate="
{StaticResource ImageCell}" BorderThickness="1" Style="{x:Null}" SelectedItem="{Binding SelectedLstImage}" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Style="{x:Null}"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
See how much closer to working that is.
You could do it programmatically by Iterate throw your List of Images and Instanciate a new Image and add it with lstView.Items.Add()
I made a super simple example:
<Grid>
<ListView x:Name="View"></ListView>
<Button Click="Button_Click" Height="20" Width="20">Button</Button>
</Grid>
private void Button_Click(object sender, RoutedEventArgs e)
{
for (int i = 0; i < 20; i++)
{
Label lbl = new Label();
lbl.Content = "Label " + i;
View.Items.Add(lbl);
}
}
Related
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
I'm trying to create a scrollable gird, in my app i have a vertical scrolling listbox with text items as shown below.
<ListBox x:Name="selectionList" Margin="49,0,11,0" Padding="20,20,0,0" SelectionChanged="AlbumList_SelectionChanged" ItemsSource="{Binding ''}" Background="{x:Null}" Height="606" VerticalAlignment="Top" Width="420">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding SlectionTitle}" FontSize="22" Margin="0,0,0,10" FontFamily="{StaticResource hevel}" Foreground="#FF99FFFF"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
So I Changed The TextBlock to this
<Border x:Name="Selection_List_Image" BorderBrush="#FFC4C3C3" BorderThickness="8" HorizontalAlignment="Left" Height="198" Margin="18,24,0,5" VerticalAlignment="Center" Width="199" CornerRadius="12" RenderTransformOrigin="0.5,0.5" Padding="0">
<Border.Background>
<ImageBrush Stretch="Fill" ImageSource="{Binding SelectionArt}"/>
</Border.Background>
</Border>
This is fine for a single vertical scrolling list. I'm trying to get a grid that is for example permanently 4 images high and automatically wide, so if there are 4 images it shows a column of 4 if there are 8 images it shows 2 columns of 4 and so on
i have tried this example
WP7 - issues with Horizontal scrolling Listbox
but it just kept the list vertical and scrolled horizontal
any suggestions, thanks
// Solved
Thank you, i ended up having to use the example link aswel
<ListBox x:Name="AlbumList" Margin="49,0,11,0" ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Disabled" SelectionChanged="AlbumList_SelectionChanged" ItemsSource="{Binding ''}" Background="{x:Null}" Height="748" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Vertical" ></toolkit:WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Border x:Name="Album_List_Image" BorderBrush="#FFC4C3C3" BorderThickness="8" HorizontalAlignment="Left" Height="152" Margin="18,24,0,5" VerticalAlignment="Center" CornerRadius="12" RenderTransformOrigin="0.5,0.5" Padding="0" Width="152">
<Border.Background>
<ImageBrush Stretch="Fill" ImageSource="{Binding AlbumArt}"/>
</Border.Background>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
If you're doing WP8.1 runtime you can easily do this by changing the <ItemsPanelTemplate> to a <WrapGrid> with Orientation set to Vertical and MaximumRowsOrColumns set to 4. Like so,
See MSDN WrapGrid (they actually do an example of what you want.. but in another Orientation)
<ListBox>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical" MaximumRowsOrColumns="4"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<!-- your data template -->
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
If you're doing this with WP8.0+ SL then it will be a tad bit harder. You will need the Windows Phone Toolkit and use a <WrapPanel> instead but you will need to Databind some values (or hardcode it...depending on how loose your ViewModel is)
<ListBox x:Name="myListBox" Height="412">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Vertical" ItemHeight="100" ItemWidth="100"></toolkit:WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<!-- your data template -->
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
In this example I hard coded each Item to be 100x100 and I hard coded the Height to be 412, thus making it have 4 items in the Vertical.
You can Databind the Height and ItemHeight and the ItemWidth if you choose to do so.
Currently I couple of Gridviews on separate pages which contain images they all work aside from the fact that the performance is terrible and sometimes it also causes the app to greyscreen. Does anyone know of a more efficient way to display the images within the gridview?
Here is the Binding on the C#
private void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
{
PhotoCollection PassedCollection = (PhotoCollection)e.NavigationParameter;
pCollection = PassedCollection;
pageTitle.Text = pCollection.name;
itemGridView.ItemsSource = pCollection.photos;
}
Here is the XAML:
</Grid>
<GridView
x:Name="itemGridView"
Margin="10"
ItemsSource="{Binding}"
SelectionMode="None" IsItemClickEnabled="True" Grid.Row="1" Grid.RowSpan="3">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid MaximumRowsOrColumns="5"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="200" Height="100" Margin="5,5,5,5">
<Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image Stretch="UniformToFill" Source="{Binding Image}">
</Image>
</Border>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Grid>
Don't pass complex types as a navigation parameter. This is a common gotcha and will cause your app to crash on resuming from suspension. Store your photocollection in a static class or something, and if necessary pass a key in the navigation parameter.
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.
I have integrate the FluidKit library to my project. It works well.
I use this to implement it :
private void WindowLoaded(object sender, RoutedEventArgs e)
{
_dataSource = FindResource("DataSource") as StringCollection;
_dataSource.Insert(0, "pack://application:,,/Resources/Images/CoverFlow/01.jpg");
_dataSource.Insert(1, "pack://application:,,/Resources/Images/CoverFlow/02.jpg");
_dataSource.Insert(2, "pack://application:,,/Resources/Images/CoverFlow/03.jpg");
_dataSource.Insert(3, "pack://application:,,/Resources/Images/CoverFlow/04.jpg");
_dataSource.Insert(4, "pack://application:,,/Resources/Images/CoverFlow/05.jpg");
_dataSource.Insert(5, "pack://application:,,/Resources/Images/CoverFlow/06.jpg");
_dataSource.Insert(6, "pack://application:,,/Resources/Images/CoverFlow/07.jpg");
_dataSource.Insert(7, "pack://application:,,/Resources/Images/CoverFlow/08.jpg");
_dataSource.Insert(8, "pack://application:,,/Resources/Images/CoverFlow/09.jpg");
_dataSource.Insert(9, "pack://application:,,/Resources/Images/CoverFlow/10.jpg");
_dataSource.Insert(10, "pack://application:,,/Resources/Images/CoverFlow/11.jpg");
_dataSource.Insert(11, "pack://application:,,/Resources/Images/CoverFlow/12.jpg");
_elementFlow.SelectedIndex = _dataSource.Count / 2;
}
But i can't adapt the library to my project.
I'm trying to have one coverflow with 8 pages (1 picture and 1 title compose a page). But I have the opposite.
My xaml code :
<Grid>
<ItemsControl x:Name="ContentItems"
ItemsSource="{Binding Path=Category.Content, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:StorySelectionControl}}}"
>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="2" Height="{Binding ActualHeight, ElementName=ContentScrollViewer, Mode=OneWay}" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<FluidKit:ElementFlow x:Name="_elementFlow" TiltAngle="45" ItemGap="0.2" FrontItemGap="1.5" PopoutDistance="1.5" HasReflection="True"
SelectedIndex="3" Margin="0,0,0,0">
<Border x:Name="ImageBorder" BorderBrush="{StaticResource SelectedColorBrush}">
<Grid>
<Image Source="{Binding ContentImage}" Margin="1,1,1,1" RenderOptions.BitmapScalingMode="HighQuality" Stretch="UniformToFill" />
</Grid>
</Border>
<TextBlock x:Name="StoryTitle" Text="{Binding Title}" Foreground="Black" Grid.Row="1"
Margin="0,25,0,0" FontFamily="Segoe" FontWeight="Light" HorizontalAlignment="Left" VerticalAlignment="Top"
FontSize="30" Height="80" TextAlignment="Left" TextWrapping="Wrap" TextTrimming="CharacterEllipsis" />
<FluidKit:ElementFlow.Camera>
<PerspectiveCamera FieldOfView="50" Position="0,0,6" LookDirection="0,-0,-6" />
</FluidKit:ElementFlow.Camera>
</FluidKit:ElementFlow>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
My coverflow image link :
http://img819.imageshack.us/img819/1057/capturevad.png
Do you have some idea?
If you don't understand, tell me!
My english isn't very good :-)