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.
Related
Below is my xaml code which defines ListView. The output is series of products. But the problem is the product aligns one after another.
I Want an output align vertically one after another.
<ListView x:Name="list" Margin="0,0,0,0" SelectionChanged="list_SelectionChanged" VerticalAlignment="Top">
<ListView.Resources>
<DataTemplate x:Key="myCell">
<Border BorderBrush="Gray" BorderThickness="0,0,0,0" >
<Grid Margin="0" x:Name="tryadpative" >
<Grid.RowDefinitions>
<RowDefinition Height="8*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Image x:Name="prodimg" Width="auto" Source="{Binding prodimg}" Grid.Row="0"></Image>
<TextBlock x:Name="productcode" TextWrapping="Wrap" Text="{Binding productcode}" HorizontalAlignment="Center" Width="auto" FontSize="12" Grid.Row="1" Foreground="Gray"/>
<TextBlock x:Name="productname" FontSize="14" HorizontalAlignment="Center" VerticalAlignment="Bottom" Foreground="Gray" Grid.Row="0" Text="{Binding productname}" />
<TextBlock x:Name="productmindec" TextWrapping="Wrap" HorizontalAlignment="Center" Text="{Binding productmindec}" Width="auto" FontSize="14" Grid.Row="2" Foreground="Gray"/>
<!--<Image x:Name="prodimg" Width="auto" Source="{Binding prodimg}" Grid.Row="0"></Image>
<TextBlock x:Name="productcode" TextWrapping="Wrap" Text="{Binding productcode}" Width="auto" FontSize="12" Foreground="Gray"/>
<TextBlock x:Name="productname" FontSize="14" Foreground="Gray" Text="{Binding productname}" />
<TextBlock x:Name="productmindec" TextWrapping="Wrap" Text="{Binding productmindec}" Width="auto" FontSize="14" Foreground="Gray"/>-->
</Grid>
</Border>
</DataTemplate>
</ListView.Resources>
<!--<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>-->
<ListView.ItemTemplate>
<StaticResource ResourceKey="myCell"/>
</ListView.ItemTemplate>
</ListView>
ItemsStackPanel can be used only as the ItemsPanel of an ItemsControl that displays more than one item at a time. It can't be used with an ItemsControl that displays only one item at a time, such as a ComboBox or FlipView. ItemsStackPanel is the default ItemsPanel for ListView.
By default, the ItemsStackPanel stacks items vertically from top to bottom. You can set the Orientation property to Horizontal to stack items from left to right.
For more info, see ItemsStackPanel.
We should be able to set the Horizontal to the Orientation of the ItemsStackPanel.
For example:
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsStackPanel Orientation="Horizontal" >
</ItemsStackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
By the way, if you want scroll the ListView in horizontal, you should be able to set the Visible to ScrollViewer.HorizontalScrollBarVisibility and Enabled to the ScrollViewer.HorizontalScrollMode in ListView.
For example:
<ListView x:Name="list"
Margin="0,0,0,0"
SelectionChanged="list_SelectionChanged"
VerticalAlignment="Top"
SelectionMode="Single"
ScrollViewer.HorizontalScrollBarVisibility="Visible"
ScrollViewer.HorizontalScrollMode="Enabled">
</ListView>
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;
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 am using a listbox with a customized ItemTemplate style. It basically attach a button with each item in listbox. I want to show the last item in thge list box without button. How can i accomplish it?
.xaml file code is given below.
<!-- ListBox to display recordings -->
<ListBox Name="myListBox" Grid.Row="0"
HorizontalAlignment="Left" Width="470"
ScrollViewer.VerticalScrollBarVisibility="Visible"
ScrollViewer.ManipulationMode="System"
SelectionChanged="OnMemosListBoxSelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button Grid.Column="0"
Grid.Row="0"
Grid.RowSpan="3"
Padding="0"
HorizontalAlignment="Left"
VerticalAlignment="top"
Height="80"
Width="80"
Tag="{Binding BindsDirectlyToSource=True}"
Click="OnDeleteButtonClick">
<Button.Content>
<Image Source="/images/delete.png" Margin="0" Width="50" Height="50" />
</Button.Content>
</Button>
<TextBlock Grid.Column="1"
FontSize="{StaticResource PhoneFontSizeMediumLarge}"
Grid.Row="0"
Text="{Binding fileName}"
VerticalAlignment="Center"/>
<StackPanel Grid.Column="1" Margin="0,0,0,17"
Grid.Row="1" Height="50"
Orientation="Horizontal"
VerticalAlignment="Top">
<TextBlock FontSize="{StaticResource PhoneFontSizeNormal}" Text="Recorded on " />
<TextBlock FontSize="{StaticResource PhoneFontSizeNormal}" Text="{Binding crDate}" />
<TextBlock Text=" Duration " />
<TextBlock FontSize="{StaticResource PhoneFontSizeNormal}" Text="{Binding duration}" />
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Add a property, e.g. ShowButton to all your items, set it to false for the last item (true for all other items) in the collection and then in your DataTemplate show the button only when the proprerty is true
i don't know why the last item of list does not need that button , but i suggest to you, you can use longlistselector's ListFooterTemplate.
make footer item be independent.
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>