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
Related
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);
}
}
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.
I'm new in XAML for Windows Phone 8.1 and have some troubles with
making a Stackpanel clickable
collapse Item, when clicked
My work so far looks like that:
And the Code to that (please correct me, if there are major flaws):
<Border CornerRadius="15" Background="#FF595656" Margin="0" Grid.ColumnSpan="2" Height="80">
<StackPanel Orientation="Horizontal">
<StackPanel Width="20" HorizontalAlignment="Left" VerticalAlignment="Top" />
<StackPanel HorizontalAlignment="Left" Height="80" Margin="0,0,0,0" VerticalAlignment="Center" Width="51">
<Image HorizontalAlignment="Left" Height="51" Margin="0,15,0,0" Width="51" Source="Assets/fish.png" Stretch="Fill" RenderTransformOrigin="2.307,0.881" VerticalAlignment="Center"/>
</StackPanel>
<StackPanel Width="10" HorizontalAlignment="Left" VerticalAlignment="Top" />
<StackPanel HorizontalAlignment="Left" Height="80" Margin="0" VerticalAlignment="Top" Width="310">
<TextBlock HorizontalAlignment="Left" Height="25" Margin="0,20,0,0" TextWrapping="Wrap" Text="Entry 1" Width="310" VerticalAlignment="Top" FontSize="18" Foreground="Black" FontWeight="Bold"/>
<TextBlock HorizontalAlignment="Left" Height="17" Margin="0" TextWrapping="Wrap" Text="Short description Entry 1" Width="310" VerticalAlignment="Top" Foreground="#FF0097FF"/>
</StackPanel>
</StackPanel>
</Border>
This code will later be wrapped inside a ListBox with Image, Entry 1 and the short description being bound:
<ListBox x:Name="ListBox1" Margin="0"
Width="400" Height="200" HorizontalAlignment="Left"
ItemsSource="{Binding}" Grid.Row="1" VerticalAlignment="Top" Grid.ColumnSpan="2" >
<ListBox.ItemTemplate>
<DataTemplate>
// the code above
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
So my question is:
How can I make a nice looking expansion/collapse of each Item in the ListBox, whenever I click on it?
Thank you very much in advance.
The real question is here is what do you want it to collapse to? There are too many possible ways to collapse some visual data item. Do you just want to change the height of the item or do you want some fancy animation that collapse some property?
If the height is what you're looking for it's pretty easy. Just attach an Tap Event on that Border of yours. On a sidenote, you probably want to edit the ItemContainerStyle to have <Setter Property="HorizontalContentAlignment" Value="Stretch"/> so the Listbox will stretch across the screen, otherwise imho it's un-useable.
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Red" BorderThickness="0,1" Tap="Border_Tap">
<StackPanel>
<!--- rest of template --->
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
Then calculate the Minimum height you want to show (make sure it's actually useable, meaning... I can Tap on it again to show the whole thing without using a Mag Glass).
private void Border_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
int minHeight = 40; // change to whatever you want
Border b = sender as Border;
if (b.ActualHeight > minHeight)
{
b.Height = minHeight;
}
else
{
b.Height = double.NaN; // this will change the height back to Auto, showing everything
}
}
Code In Action
This is just a quick solution to your question. Some people on here would rather have you create a StoryBoard Animation on the Height Property of the Selected state in the VisualStateManager. If you reword or create a new question explicitly stating you want a VisualStateManager solution, I will provide you one as well. Good luck.
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 a listbox inside of a stack panel inside of a border in a silverlight application and when ever I add anything to the listbox it increases in height so the scrollbar is never used and it extends beyond the boundaries of the border element. I have tried explicitly setting the height attribute of the listbox, the border and the stack panel and it still goes beyond this.
Here is my code:
<Border x:Name="articlePane">
<StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Top">
<Button Content="Latest" MouseEnter="HandleRollInAnimation" MouseLeave="HandleRollOutAnimation" />
<Button Content="Pending" MouseEnter="HandleRollInAnimation" MouseLeave="HandleRollOutAnimation" />
<Button Content="Done" MouseEnter="HandleRollInAnimation" MouseLeave="HandleRollOutAnimation" />
</StackPanel>
<ListBox x:Name="articleList" Margin="5" Background="Transparent" ItemsSource="{Binding}"
ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" VerticalAlignment="Top" HorizontalAlignment="Center">
<Image x:Name="articleImage" />
<TextBlock x:Name="articleTitle" Text="{Binding Path=Title}" FontSize="18" FontWeight="Bold"
Margin="5"/>
<TextBlock x:Name="articleDate" Text="{Binding Path=Date}" FontSize="14" Foreground="Gray"
Margin="5"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Border>
I have a feeling that the StackPanel just keeps on adding height forever. I think in this instance you'd be better off with a Grid layout within your Border. Put the Button StackPanel in one height defined row, and the ListBox in an autosizing * height row. This way Grid will stick within the confines of your form.