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.
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 am using auto complete textbox from windows phone toolkit.I need the list of suggestions below my textbox but it shows up above the text box .How do I make the suggestions appear below the text box..Here is my XAML.
<Grid Margin="0,336,0,189" x:Name="editrow" Visibility="Visible">
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="220" ></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
</Grid.ColumnDefinitions>
<toolkit:AutoCompleteBox x:Name="newname" FilterMode="StartsWith" IsTextCompletionEnabled="True" Foreground="White" Background="#53000000" BorderThickness="0" Grid.Column="0" Grid.Row="0" Margin="10,0,0,0" IsDropDownOpen="True" RenderTransformOrigin="0,0">
<toolkit:AutoCompleteBox.ItemTemplate>
<DataTemplate>
<StackPanel Background="Gray" Orientation="Horizontal">
<TextBlock Text="{Binding }"/>
</StackPanel>
</DataTemplate>
</toolkit:AutoCompleteBox.ItemTemplate>
</toolkit:AutoCompleteBox>
<TextBox x:Name="rowquantity" Foreground="White" Background="#53000000" BorderThickness="0" Grid.Column="1" Grid.Row="0" InputScope="Number"></TextBox>
<toolkit:ListPicker Grid.Row="0" x:Name="units" Foreground="White" BorderThickness="0" Background="#53000000" Grid.Column="2" ExpansionMode="FullScreenOnly" Margin="12,5,0,14" >
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0 0 0 0">
<TextBlock Text="{Binding}"
FontSize="32" LineHeight="1"/>
</StackPanel>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
<Button Content="Add" BorderBrush="#53000000" Foreground="#53000000" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Top" Height="74" Click="Button_Click" Margin="0,0,3,0" Width="158"/>
</Grid>
The location of the popup is determined based on the available size. If there's more space above the AutoCompleteTextBox, it will pop up. You can see this in the popuphelper.cs source file where the code arranges the popup.
There really isn't an option to override the behavior.
Problem solved!
Anyway, I just figured out the problem. I did a .Trim() on the values and surprisingly they can be wrapped. Thanks and sorry for all the trouble. =)
I am doing some data binding to my textblock in a grid.
However, some of the texts are not showing fully.
I tried the Text Wrapping and setting a maximum width to my textblock. But none of them worked.
EDIT : Hi again. I noticed that when I changed the text of the textblock manually via codes like
txtDesc.Text = "This is a job for Stackers. If you like stacking, please contact me.
The text wrapping actually works. So somehow the databind result text can't be wrap?
The XAML code for my textblock.
<TextBlock Name="Description" Grid.Row="4" Text="{Binding Description}" FontSize=" {StaticResource PhoneFontSizeSmall}" Height="auto" Width="220" Margin="0,0,0,0" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" MaxWidth="220"></TextBlock>
Any help here?
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot">
<Grid.Background>
<ImageBrush Stretch="Fill" ImageSource="images/SmallLogoNTitle.png"/>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<toolkit:ListPicker ItemsSource="{Binding}" Name="lpkTypeOfService" Margin="0,116,12,0" Height="65" VerticalAlignment="Top" HorizontalAlignment="Right" Width="210" SelectionChanged="lpkTypeOfService_SelectionChanged">
</toolkit:ListPicker>
<ListBox Margin="8,210,8,26" Name="listBox1" Width="450">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300"/>
<ColumnDefinition Width="150"/>
</Grid.ColumnDefinitions>
<TextBlock HorizontalAlignment="Left" Grid.Row="0" Grid.Column="0" Name="Date" Text="{Binding Date}" FontSize="{StaticResource PhoneFontSizeLarge}"></TextBlock>
<TextBlock HorizontalAlignment= "Left" Grid.Row="1" Grid.Column="0" Name="Creator" Text="{Binding CreatorID}" FontSize="{StaticResource PhoneFontSizeLarge}"></TextBlock>
<TextBlock Name="Type" Grid.Row="2" Text="{Binding Type}" FontSize="{StaticResource PhoneFontSizeSmall}"></TextBlock>
<TextBlock Name="Amount" Grid.Row="3" Text="{Binding Amount}" FontSize="{StaticResource PhoneFontSizeSmall}"></TextBlock>
<TextBlock Name="Description" Grid.Row="4" Text="{Binding Description}" FontSize="{StaticResource PhoneFontSizeSmall}" Height="auto" Width="220" Margin="0,0,0,0" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" MaxWidth="220"></TextBlock>
<Button Content="Apply" Height="70" Width="140" Name="btn1" Click="btn_Click" Grid.Row="5" Grid.Column="1"></Button>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBlock Height="65" HorizontalAlignment="Left" Margin="12,116,0,0" Name="textBlock1" Text="Find Service :" VerticalAlignment="Top" Width="216" FontSize="36" />
</Grid>
</Grid>
It comes from poor / over-complicated layout architecture and the way your objects are positioning each other. Might try something like this for your DataTemplate
<DataTemplate>
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<!-- Don't worry, you already had your 450 Width set on the parent -->
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Name="Date" Text="{Binding Date}" FontSize="{StaticResource PhoneFontSizeLarge}"/>
<TextBlock Name="Creator" Grid.Row="1" Text="{Binding CreatorID}" FontSize="{StaticResource PhoneFontSizeLarge}"/>
<TextBlock Name="Type" Grid.Row="2" Text="{Binding Type}" FontSize="{StaticResource PhoneFontSizeSmall}"/>
<TextBlock Name="Amount" Grid.Row="3" Text="{Binding Amount}" FontSize="{StaticResource PhoneFontSizeSmall}"/>
<TextBlock Name="Description" Grid.Row="4" Text="{Binding Description}" FontSize="{StaticResource PhoneFontSizeSmall}" TextWrapping="Wrap"/>
<Button Name="btn1" Click="btn_Click" Grid.Row="5" Grid.Column="1" Content="Apply" Height="70" Width="140" Margin="5,0"/>
</Grid>
</DataTemplate>
Also for the sake of cleaner xaml, remember things like Margin="0", Grid.Column="0", HorizontalAlignment="Left" etc. are default dependency properties, so no need to set them to each individual object. Even in the case you need to, you can apply them as Setters to the TargetType in the parent Object.Resources and avoid setting them to each individual object. Another tip would be, don't rely on a bunch of obfuscated random Margins etc to create your layout. It's best to do it right the first time instead of hunting down discrepancies between a bunch of inter-dependent little "fixes"
I didn't test it, but should work fine unless you got something else somewhere pushing stuff around. Hope this helps.
Can you disable horizontal scrolling in your listbox control?
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Use VerticalAlignment="Stretch" instead of VerticalAlignment="Top". This way the textblock will stretch to the height of the row.
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.
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>