I need to place images side by side and need to place one small image icon below the each image.please help me how to design ?any samples please let me know..
How to place userimage inside one small image dynamically based on condition..please help me..
I made simple prototype for you. I can't make whole screen for you. Here are the basic things as I got from your comments and screenshot. Please see XAML and screenshot below:
<ListBox Name="lstImages" VerticalAlignment="Top">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Padding" Value="0,0,0,-15" />
<Setter Property="Margin" Value="2"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel>
</toolkit:WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image Height="100" Width="110" Source="{Binding BigImageSource}" VerticalAlignment="Top"/>
<Image Height="10" Width="10" Source="{Binding SmallImageSource}" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,-35,10,0"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Use this
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Image Source="Your image" Grid.Row="0"/>
<Image Source="Your small icon" Grid.Row="1"/>
</Grid>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Image Source="Your image" Grid.Row="0"/>
<Image Source="Your small icon" Grid.Row="1"/>
</Grid>
</Grid>
<StackPanel>
<StackPanel Orientation="Horizontal">
<Image Source="Firstimage" />
<Image Source="Secondimage" />
</Stackpanel>
<StackPanel Orientation="Horizontal">
<Image Source="Firsticon" />
<Image Source="Secondicon" />
</Stackpanel>
</StackPanel>
But here you have to make some changes to the icon stackpanel like setting some margin, inorder to make it aligned to the actual images.
This is just an alternative, you can also use Grid's as answered by nucleons
If you want to show your images in listbox then wrap this way in wrap panel and you can set direction of wrappanel as well. Wrappanel is found in silverlight toolkit of windows phone 7.
<ListBox Name="lstImages">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Padding" Value="-15" />
<Setter Property="Margin" Value="0"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel>
</toolkit:WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<stackpanel>
<Image Source="Your image" />
<Image Source="Small image" />
</stackpanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
and bind this listbox with your collection of data.
Related
I am displaying list of items with it's headers and content using gridview as shown below.
<Grid>
<GridView ItemsSource="{Binding Source={StaticResource src}}">
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Background="#2a2621" Width="400" Height="35" Margin="-10,0,-10,0">
<TextBlock x:Name="atistType" Width="200"
Text="{Binding RegionalName}"
Foreground="White"
FontWeight="ExtraBold" FontSize="22" Margin="10,0,0,0"/>
<Image Margin="110,0,10,0"
Tag="{Binding RegionalName}"
Tapped="RedirectToImageListing"
Source="Assets\Right-arrow.png"
Height="25"></Image>
</StackPanel>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="2"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<Grid Margin="0,5,0,5" Tag="{Binding AlbumId}"
Tapped="RedirectToImageListOrGridView" >
<Grid>
<Image Width="{Binding ListingWidth}" Source="Assets/PlaceHolder.jpg"></Image>
<Border BorderThickness="1" BorderBrush="White">
<Image Width="{Binding ListingWidth}"
Source="{Binding SmallImage}"></Image>
</Border>
</Grid>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Grid>
I am able to show the data perfectly.
But, my concern is from somewhere a line is displaying like border.
You can check in the screenshot.
As shown in the screenshot, for the first image only a line is displaying like a border.
Is there a way to remove that.
I am not able to find from where the border is coming.
Thank you.
Try this
<GridView>
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="Margin" Value="0,0,4,4" />
<Setter Property="Background" Value="Transparent"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="IsHoldingEnabled" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewItem">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GridView.ItemContainerStyle>
Taken from here
I have something like this:
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel
Orientation="Horizontal"
Margin="2">
<Image Width="64" Height="64" Source="{Binding someIcon}"></Image>
<StackPanel Orientation="Vertical" Margin="15,1,0,1">
<TextBlock Text="{Binding someText}" FontSize="30" />
<StackPanel Orientation="Horizontal">
<TextBlock Text="Some Text"/>
<TextBlock Text="{Binding someText2}"/>
</StackPanel>
</StackPanel>
</StackPanel>
<CheckBox
Content=""
Tag="{Binding someName}"
IsChecked="{Binding checked}"
Checked="someChecked"
Unchecked="someUnchecked"/>
</DataTemplate>
</ListBox.ItemTemplate>
in the ListBox.
I need to allign StackPanel to the left and CheckBox to the right. I need to take all possible screen width and place the CheckBox just at the right edge of the screen. The screen width can change, because it's an Universal Windows App.
How can I do it?
I've tried using RelativePanel and Grid, but without success. When I use Grid with 3 columns like this:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
I get the CheckBox just after the StackPanel, not at the end of the screen.
When I however use RelativePanel I get CheckBox in place of StackPanel, even though I use RelativePanel.AlignRightWithPanel="True" in CheckBox, RelativePanel.AlignLeftWithPanel="True" in StackPanel and HorizontalAlignment="Stretch" in RelativePanel.
Do you have any ideas?
Try this
When you do HorizontalContentAlignment to stretch items will take whole ListBox width
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListView.ItemContainerStyle>
....
</ListBox>
Hi Everyone this is my first question so, I'll try to be really explicit:
I have a ListBox with a Style and Template to make it a two column style view.
This is the Template for the ListBoxItem:
<DataTemplate x:Key="ItemDataTemplate">
<Grid Height="29">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".3*" />
<ColumnDefinition Width=".7*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Name="txtBind1" Text="{Binding Codigo}"/>
<TextBlock Grid.Column="1" Name="txtBind2" Text="{Binding Descripcion}"/>
</Grid>
</DataTemplate>
<Style TargetType="ListBoxItem" x:Key="ListboxStretchStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ListBoxStyle" TargetType="ListBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ScrollViewer>
<StackPanel VerticalAlignment="Top">
<Grid Height="30" Background="Gray">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.30*"/>
<ColumnDefinition Width="0.70*" />
</Grid.ColumnDefinitions>
<Border BorderBrush="{StaticResource PhoneBackgroundBrush}" BorderThickness="1">
<TextBlock Grid.Column="0" Text="{Binding CriterioActual.Descripcion}"/>
</Border>
<Border Grid.Column="1" BorderBrush="{StaticResource PhoneBackgroundBrush}" BorderThickness="1">
<TextBlock Grid.Column="1" Text="Descripción"/>
</Border>
</Grid>
<ItemsPresenter/>
</StackPanel>
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And this is the ListBox:
<ListBox Height="320" Margin="0,84,0,0" Name="ListaArticulos" VerticalAlignment="Top"
Style="{StaticResource ListBoxStyle}"
ItemTemplate="{StaticResource ItemDataTemplate}"
ItemContainerStyle="{StaticResource ListboxStretchStyle}"
ItemsSource="{Binding Articulos}">
</ListBox>
This is the Result:
At this point, everything is fine, so I implemented a TemplateSelector to change the template of the ListBoxItem depending of SelectedItem of a ListBox. So I put the same template into a TemplateSelector but the Grid's Width is not Stretching.
Template Selector:
<DataTemplate x:Key="MultiTemplate">
<Views:ArticulosTemplateSelector Content="{Binding}" Filtro="{Binding ElementName=ComboCriterios, Path=SelectedItem, Mode=OneWay}">
<Views:ArticulosTemplateSelector.FiltroCodigo>
<DataTemplate>
<Grid Height="29" Background="Gray" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".3*" />
<ColumnDefinition Width=".7*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Name="txtBind1" HorizontalAlignment="Stretch" Text="{Binding Codigo}"/>
<TextBlock Grid.Column="1" Name="txtBind2" HorizontalAlignment="Stretch" Text="{Binding Descripcion}"/>
</Grid>
</DataTemplate>
</Views:ArticulosTemplateSelector.FiltroCodigo>
</DataTemplate>
This is the Updated ListBox:
<ListBox Height="320" Margin="0,84,0,0" Name="ListaArticulos" VerticalAlignment="Top"
Style="{StaticResource ListBoxStyle}"
ItemTemplate="{StaticResource MultiTemplate}"
ItemContainerStyle="{StaticResource ListboxStretchStyle}"
ItemsSource="{Binding Articulos}">
</ListBox>
The Final Result:
The Grid is not stretching, If anyone can please help me I'll apreciate.
The Template Selector has its own Width, so is important to stretch the Selector to allow the Grids to expand its size:
<Views:ArticulosTemplateSelector HorizontalContentAlignment="Stretch" Content="{Binding}" Filtro="{Binding ElementName=ComboCriterios, Path=SelectedItem, Mode=OneWay}">
Note the principal change:
HorizontalContentAlignment="Stretch"
Regards
I got problems with setting Listbox TemplateSelector to span 100%. My solution to this, was to replace Listbox with LongListSelector.
i Would like to make simple ListBox. Each line should contain 2 controls, one aligned to the left the other to the right, thats all :)
I tried multiple approaches but nothing worked. My code is following
<StackPanel Grid.Row="1" Margin="12,0,12,0" Grid.Column="0">
<ListBox Name="ListBox" Margin="12,0,12,0" ItemsSource="Exercises" HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Width=">
<TextBlock Text="abc" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<TextBlock Text="def" HorizontalAlignment="Right" VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
(Two textblocks are just for demonstration, in real application i'd like to bind one text block to real data, instead of second ill use button.)
When ill compile this, both textblock are aligned to the left, in emulator, it seems like one textblock with text "abcdef".
Any idea how to align one text block to the right and the other one to the left?
many thanks :)
By default the ListBoxItem does not fill the space it is given. It aligns itself and the content to the left. To ensure that the content of your ListBoxItem spans the entire width, you need to change the ItemContainerStyle
<ListBox>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
Now the content will span the available width. If you wish to use a StackPanel as in your example, make sure to set it's HorizontalAlignment also. The StackPanel also does not fill in the available space given
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<TextBlock Text="abc" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<TextBlock Text="def" HorizontalAlignment="Right" VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
However, I would recommend using a Grid and defining two columns
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="abc" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<TextBlock Text="def" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center"/>
</Grid>
</DataTemplate>
I have a ListBox which has StackPanels holding a TextBlock and an Image horizontally, followed by a ContentPresenter. This is what the XAML looks like:
<Grid x:Name="ContentPanel"
Grid.Row="1"
Margin="12,0,12,0">
<ListBox x:Name="MainListBox"
Margin="12,0,12,0"
SelectionChanged="MainListBox_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu x:Name="ContextMenu"
Opened="ContextMenu_Opened">
<toolkit:MenuItem Header="edit"
Tag="edit"
Click="MenuItem_Click" />
<toolkit:MenuItem Header="delete"
Tag="delete"
Click="MenuItem_Click" />
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Left">
<!-- **** This text won't wrap **** -->
<TextBlock Text="{Binding Header}"
TextWrapping="Wrap"
Style="{StaticResource PhoneTextNormalStyle}"
Foreground="{StaticResource PhoneAccentBrush}" />
<Image Source="/image.png"
Visibility="{Binding ImageVisibility}" />
</StackPanel>
<ContentPresenter Content="{Binding Content}"
HorizontalAlignment="Stretch" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
</Grid>
I'm setting the ItemsSource of the ListBox to an ObservableCollection within the page constructor. Everything works fine until the Header text becomes too long, in which case it is not wrapping as I've specified it to. How can I force the TextBlock to wrap the text?
Thanks for your help!
This is likely a result of not restricting the width of the TextBlock, so it is growing horizontaly off screen where you can't see it.