I am using a Grid and in my page. The page should be equally partitioned like a ice cube tray.
The each grid column contains a image.
For partitioning into 3 equal parts i am using this code:
<ListBox SelectionChanged="listBox1_SelectionChanged" HorizontalContentAlignment="Stretch" Height="720" HorizontalAlignment="Left" Margin="1,5,0,0" Name="listBox1" VerticalAlignment="Top">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Center" VerticalAlignment="Top" Margin="3" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Border CornerRadius="6" BorderBrush="Gray" BorderThickness="2" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="border1">
<toolkit:WrapPanel x:Name="wp">
<Image Source="{Binding ImagePicture}" Margin="0,10,0,0" Height="110" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Margin="0,0,0,5" TextAlignment="Center" Text="{Binding categoryname}" Foreground="Black" FontStyle="Normal" Height="Auto" Width="140" HorizontalAlignment="Center" VerticalAlignment="Stretch"/>
</toolkit:WrapPanel>
</Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Now when i use this, sometimes the images are small i face this problem i have shown.
This is what i Want:
This is my problem:
Can you please share the solution for this problem.
This xaml will work-
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
Related
I've got RadGridView with few columns. In one column I've got CellTemplate and CellEditTemplate. I would like to fill cell with my combobox, but regardless setting cell padding to 0 and VerticalAligment to Stretch it still have got one line height with margins on top and bottom. Anyone have any sugestion?
<Style x:Name="BookCellStyle" TargetType="telerik:GridViewCell">
<Setter Property="Padding" Value="0"/>
</Style>
<telerik:GridViewDataColumn Width="*"
MinWidth="200"
TextAlignment="Center"
IsReadOnly="False"
CellStyle="{StaticResource BookCellStyle}"
DataMemberBinding="{Binding BookId, Mode=TwoWay, NotifyOnValidationError=True}">
<telerik:GridViewDataColumn.CellTemplate>
<DataTemplate DataType="models:BookObject">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="15"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Path=BookNumber}" Margin="4,4,0,4"/>
<TextBlock Grid.Column="1" Text="-" HorizontalAlignment="Center" Margin="0,4"/>
<TextBlock Grid.Column="2" Text="{Binding Path=BookName}" TextWrapping="Wrap" MaxWidth="360" Margin="0,4,4,4"/>
</Grid>
</DataTemplate>
</telerik:GridViewDataColumn.CellTemplate>
<telerik:GridViewDataColumn.CellEditTemplate>
<DataTemplate DataType="models:BookObject">
<telerik:RadComboBox
ItemsSource="{Binding Path=Books}"
SelectedValuePath="Guid"
SelectedValue="{Binding Path=BookId, Mode=TwoWay, NotifyOnValidationError=True}">
<telerik:RadComboBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="15"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Path=BookNumber}" Margin="0,4"/>
<TextBlock Grid.Column="1" Text="-" HorizontalAlignment="Center" Margin="0,4"/>
<TextBlock Grid.Column="2" Text="{Binding Path=BookName}" TextWrapping="Wrap" MaxWidth="360" Margin="0,4"/>
</Grid>
</DataTemplate>
</telerik:RadComboBox.ItemTemplate>
</telerik:RadComboBox>
</DataTemplate>
</telerik:GridViewDataColumn.CellEditTemplate>
</telerik:GridViewDataColumn>
I need to hide vertical scrollbar in LongListSelector. For this I use:
ScrollViewer.VerticalScrollBarVisibility="Hidden"
In ListBox it works well but in LongListSelector it doesn't work.
This is my LongListSelector code:
<Grid x:Name="ContentPanel"
Grid.Row="1"
Margin="12,0,12,0">
<toolkit:LongListSelector x:Name="TasksLongListSelector"
Margin="0,12,0,0"
Background="Transparent"
ScrollViewer.VerticalScrollBarVisibility="Hidden">
<toolkit:LongListSelector.GroupHeaderTemplate>
<DataTemplate>
<Border Width="431"
Height="53"
HorizontalAlignment="Left"
BorderThickness="2"
BorderBrush="White"
Margin="13,0,0,22">
<Grid HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Key, Converter={StaticResource LocalDateConverter}}"
FontSize="20"
FontWeight="Bold"
Foreground="White"
HorizontalAlignment="Left"
Padding="14,10,0,0" />
<Image Grid.Column="1"
Source="/Images/CalendarWhiteIcon.png"
Width="21"
Height="21"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Margin="0,13,14,0" />
</Grid>
</Border>
</DataTemplate>
</toolkit:LongListSelector.GroupHeaderTemplate>
<toolkit:LongListSelector.ItemTemplate>
<DataTemplate>
<Button Background="White"
Width="455"
Height="105"
Margin="0,-12,0,12"
Tag="{Binding Id}"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
Click="Button_Click_1">
<Grid HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="24" />
</Grid.RowDefinitions>
<TextBlock Grid.ColumnSpan="4"
Text="{Binding Name}"
FontSize="24"
Foreground="#400000" />
<Image Grid.Row="1"
Visibility="{Binding Project, Converter={StaticResource StringToVisibilityConverter}}"
Source="/Images/ProjectIcon.png"
Width="20"
Height="18"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="0,0,5,0" />
<TextBlock Grid.Row="1"
Grid.Column="1"
Visibility="{Binding Project, Converter={StaticResource StringToVisibilityConverter}}"
Text="{Binding Project, Converter={StaticResource ToUppercaseConverter}}"
FontSize="16"
Foreground="#666666"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="0,-2,9,0"
LineStackingStrategy="BlockLineHeight" />
<Image Grid.Row="1"
Grid.Column="2"
Visibility="{Binding Context, Converter={StaticResource StringToVisibilityConverter}}"
Source="/Images/ContextIcon.png"
Width="20"
Height="18"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="-3,1,1,0" />
<TextBlock Grid.Row="1"
Grid.Column="3"
Visibility="{Binding Context, Converter={StaticResource StringToVisibilityConverter}}"
Text="{Binding Context, Converter={StaticResource ToUppercaseConverter}}"
FontSize="16"
Foreground="#666666"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="0,-2,0,0"
LineStackingStrategy="BlockLineHeight" />
</Grid>
</Button>
</DataTemplate>
</toolkit:LongListSelector.ItemTemplate>
</toolkit:LongListSelector>
</Grid>
How can I hide vertical scrollbar in LongListSelector?
I found solution. To LongListSelector event Loaded add this code:
ScrollViewer sv = VisualTreeHelper.GetChild(VisualTreeHelper.GetChild(TasksLongListSelector, 0), 0) as ScrollViewer;
ScrollBar sb = ((FrameworkElement)VisualTreeHelper.GetChild(sv, 0)).FindName("VerticalScrollBar") as ScrollBar;
sb.Width = 0;
I want to add context menu to listbox. But when I hold to listbox item, nothing happens.
Thanks..
This code is definition of my listbox. I added context menu into listbox.
<ListBox Grid.Row="1" Name="chList" ItemsSource="{Binding Ch.Texts}" SelectionChanged="TextChanged" Style="{StaticResource ListOfText}">
<ListBox.ItemTemplate>
<DataTemplate>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu Name="ContextMenu">
<toolkit:MenuItem Name="Edit" Header="Edit" Click="Edit_Click"/>
<toolkit:MenuItem Name="Delete" Header="Delete" Click="Delete_Click"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</DataTemplate>
</ListBox.ItemTemplate>
</Listbox>
in styles.xaml
<Style x:Key="ListOfText" TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="RootElement" Padding="{StaticResource PhoneBorderThickness}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Background="{StaticResource PhoneAccentBrush}"
Opacity="{Binding IsRead,Converter={StaticResource opacityConverter}}" />
<Grid MinHeight="60" Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding Title}" TextWrapping="Wrap"
Style="{StaticResource PhoneTextTitle3Style}" />
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding PbDate, Converter={StaticResource dateConverter}}"
VerticalAlignment="Center" TextWrapping="Wrap" Style="{StaticResource PhoneTextSmallStyle}" />
<Image Grid.Column="1" Height="{StaticResource PhoneFontSizeNormal}" HorizontalAlignment="Left"
Visibility="{Binding IsStared,Converter={StaticResource visibilityConverter}}" Source="/Toolkit.Content/favs.png" />
</Grid>
</Grid>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Styles.xaml in mysolution... but I can't solve this problem..
Thanks...
You are setting the item DataTemplate to be a ContextMenuService.ContextMenu and there is no actual content. You need to actually have some content displayed there. Also, do you have any items in the list?
Move the ContextMenuService.ContextMenu in one main template - currently you are splitting it (for an unknown reason). Remove the DataTemplate declaration in the ListBox control itself and use your pre-defined style.
In my XAML I have a listview. The item template of the listview contains a grid. This grid has 4 columns and 2 rows. Like so:
I want the left column be filled with an image and a colored bar under the image. My core problem is that the image will most of the time determine the height of the item. While the image max height is supposed to be defined by the rest of the item. So minimal 100 (Grid MinHeight="125" - Height="25" of the rect). Or larger if the text makes the item larger. But the text is supposed to define the height of the item. Not the image.
My current xaml is the following:
<Grid MinHeight="125">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="48" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" Width="100">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="{Binding Path=BitmapImage}" Stretch="UniformToFill" />
<Rectangle Grid.Row="1">
<Rectangle.Fill>
<SolidColorBrush Color="{Binding Path=Color}" />
</Rectangle.Fill>
</Rectangle>
</Grid>
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Path=Name}" FontWeight="ExtraBold" TextWrapping="Wrap" FontSize="16" />
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=Description}" TextWrapping="Wrap" FontSize="20" />
<TextBlock Grid.Row="0" Grid.RowSpan="2" Grid.Column="2" Text="{Binding Path=Type}" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap" FontSize="20" Margin="5" />
<TextBlock Grid.Row="0" Grid.Column="3" Text="{Binding Path=Distance, Converter={StaticResource DistanceConverter}}" FontSize="16" />
<Image Grid.Column="3" Grid.RowSpan="2" Source="/Images/appbar.next.rest.png" Stretch="Fill" Width="24" Height="24" />
</Grid>
http://darutk-oboegaki.blogspot.com/2011/07/binding-actualheight-and-actualwidth.html contains information on how to do this, accounting for the fact that in Silverlight, ActualHeight commonly gives a value of 0.
From there, if you need to subtract 25 pixels, you can:
Write a converter (an object that implements System.Windows.UI.Xaml.Data.IValueConverter)
Add an instance of the converter into the Resources of the page/window.
Add Converter={StaticResource MyConverter}, ConverterParameter=25 to your binding.
Hope that helps :)
I have the following XAML markup in a WP7 UserControl. My problem is that when my ListBox has more items than will fit on a page it will not scroll properly. I can scroll the list by panning upwards with my finger but as soon as I remove my finger it jumps back to the top of the list (if the list is very long then the scrolling will not even work to this limited extent).
I have tried numerous different layouts with no success e.g. Wrapping ListBox in ScrollViewer, utilising StackPanel instead of Grid, removing the WrapPanel and replacing it with a grid.
Other similar questions suggested removing StackPanel (which I did but made no difference) or using ScrollViewer (which did not work).
The Page that hosts the UserControl uses a GestureListener - I removed that and it still made no difference.
<Grid x:Name="LayoutRoot"
Background="SteelBlue">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!--<TextBlock Grid.Row="0"
Text="Search"
Style="{StaticResource PhoneTextTitle2Style}" />-->
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="Search Type"
Grid.Column="0"
VerticalAlignment="Center" />
<RadioButton Content="RMB/RSD"
Grid.Column="1"
IsChecked="{Binding Path=SearchType, Converter={StaticResource enumBooleanConverter}, ConverterParameter=RMB, Mode=TwoWay}" />
<RadioButton Content="Name"
Grid.Column="2"
IsChecked="{Binding Path=SearchType, Converter={StaticResource enumBooleanConverter}, ConverterParameter=Name, Mode=TwoWay}" />
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="Search Term"
Grid.Column="0"
VerticalAlignment="Center" />
<TextBox Grid.Column="1"
Text="{Binding SearchTerm, Mode=TwoWay}"
InputScope="{Binding SearchTermInputScope}">
<i:Interaction.Behaviors>
<b:SelectAllOnFocusBehavior />
</i:Interaction.Behaviors>
</TextBox>
</Grid>
<Button Grid.Row="2"
Content="Find"
cmd:ButtonBaseExtensions.Command="{Binding FindDeliveryPointsCommand}" />
<ListBox Grid.Row="3"
ItemsSource="{Binding SearchResults}"
ScrollViewer.VerticalScrollBarVisibility="Auto">
<ListBox.ItemTemplate>
<DataTemplate>
<toolkit:WrapPanel Orientation="Horizontal"
Width="480"
Background="{Binding RMB, Converter={StaticResource alternateColorConverter}}">
<TextBlock Text="{Binding RMB}"
FontSize="26"
Foreground="Navy"
Padding="5"
Width="60" />
<TextBlock Text="{Binding HouseholdName}"
FontSize="26"
Foreground="Navy"
Padding="5"
Width="420" />
<TextBlock Text="{Binding StreetWithRRN}"
FontSize="26"
Foreground="Navy"
Padding="5" />
<TextBlock Text="{Binding Street.Locality.Name}"
FontSize="26"
Foreground="Navy"
Padding="5" />
</toolkit:WrapPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Specify ListBox.Height - something like Height="200". As it is now, ListBox expands automatically to accomodate all loaded items and it grows out of the screen. As a result you get large page with no scroller.
When you add ListBox.Height, the ListBox area won't grow. Instead ListBox ScrollViewer will be activated and you'll get the effect you need.
I use databinding when the ListBox's Height changed depending on the other controls on the page.
<StackPanel x:Name="ContentPanel" Grid.Row="1">
<ListBox x:Name="LstSample" Height="{Binding ElementName=ContentPanel, Path=ActualHeight}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding ImagePath}" Stretch="None"/>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Name}" FontSize="45"/>
<TextBlock Text="{Binding Group}" FontSize="25"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>