I want to show partition around each item of longlistselector like listview in android. I am unable to find any relevant data. All people are showing data without showing partition line etc.
<phone:LongListSelector x:Name="playerList"
IsGroupingEnabled="False" LayoutMode="List" VerticalAlignment="Top" HorizontalAlignment="Center"
Width="446">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding info}" />
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
I want to show some kind of partition around TextBlock
You could use a border in your listpicker datatemplate.
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="1">
<TextBlock Text="{Binding}"/>
</Border>
</DataTemplate>
Related
I want to develop app which is targeting to Multi resolution Device i Windows Phone(i.e. : 480*800 to 1080*1920)
this is my code for list box
<ListBox x:Name="LstContact">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="#cbc6c0"
BorderThickness="0,0,0,2"
Margin="10">
<Grid >
<TextBlock Text="{Binding FirstName}"
Foreground="Black"
FontSize="22"
Margin="10" />
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And output should be like this
please help to that
It is Silverlight, so just put something like Width="480" to your Border and you are done.
Can anyone suggest what is wrong with this xaml?
<phone:PivotItem Header="Test" x:Name="TestTab">
<Grid Margin="0,0,0,0">
<phone:LongListSelector x:Name="UserProducts" ItemsSource="{Binding Path=ProductList}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<Grid x:Name="ProductDetailsGrid">
<Button x:Name="DisplayProductDetails" Content="{Binding Id}" Tap="DisplayProductDetailsButton_OnTap"/>
<phone:LongListSelector x:Name="ListSelector">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<TextBlock x:Name="TextBlock" Text="Hi"/>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</Grid>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</Grid>
</phone:PivotItem>
If I comment the inner LongList, it works fine and generate the buttons for each Item in ProductList. Does the inner list have to be bind as well? can I not bind it on run time?
IDEA:
What I want to achieve is following
when the user clicks on the particular button, I display the product details. so when user clicks on product a. I can at run time get details of product A and bind it to inner list.
what seems to happen is that LongListSelector is not direct child of the PivotItem, you don't need the Grid, remove it, that was causing the problem.
Testing Windows Phone 8 Apps using MVVM framework.
ListPage.xaml:
<phone:PanoramaItem x:Name="mpnP" Width="475">
<Grid Style="{StaticResource GridPanoPage}" >
<ListBox x:Name="pkList" Style="{StaticResource ListBoxHeadlines}" >
<ListBox.ItemTemplate>
<DataTemplate >
<ListBoxItem Style="{StaticResource ListBoxItemHub}">
<StackPanel Orientation="Horizontal">
<Image x:Name="pkImage" Source="{Binding ImagePath}" />
<StackPanel>
<TextBlock x:Name="pkHead" Text="{Binding Head}"/>
</StackPanel>
</StackPanel>
</ListBoxItem>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</phone:PanoramaItem>
On List Box selection changed , navigate to detail page on the basis of ID-
if (!string.IsNullOrEmpty(Session.ID))
NavigationService.Navigate(new Uri("/Views/Detail.xaml", UriKind.Relative));
Now I want to navigate to next ID on Swipe screen. means -
if ID -- 3 is currently on screen and if user Swipe the screen then next ID detail will display on screen.
This process done till list box last id.
On the details page, can with the help of a FlipView navigate between several items. And every time the event SelectionChange occurs change the Id in ViewModel.
<toolkit:FlipView x:Name="FlipViewImages" ItemsSource="{Binding Images}" >
<toolkit:FlipView.ItemTemplate>
<DataTemplate>
<utils:ImageZoomControl Url="{Binding}"/>
</DataTemplate>
</toolkit:FlipView.ItemTemplate>
<toolkit:FlipView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</toolkit:FlipView.ItemsPanel>
</toolkit:FlipView>
The FlipView is not a native control, you have to import through the nuget Manager, Windows Phone ToolKit.
If your Item Source is a list of objects do not need to do anything else.
Here is how my Pivot control looks on my WP app.
here is the code for same.
<phone:Pivot>
<!--Pivot item one-->
<phone:PivotItem>
<phone:PivotItem.Header>
<ContentControl>
<Image Source="/Assets/alarmClock.png"/>
</ContentControl>
</phone:PivotItem.Header>
<Grid>
<TextBlock Text="hello1"/>
</Grid>
</phone:PivotItem>
<!--Pivot item two-->
<phone:PivotItem >
<phone:PivotItem.Header>
<ContentControl>
<Image Source="/Assets/clock.png"/>
</ContentControl>
</phone:PivotItem.Header>
<Grid>
<TextBlock Text="hello 2"/>
</Grid>
</phone:PivotItem>
<!--Pivot item three-->
<phone:PivotItem>
<phone:PivotItem.Header>
<ContentControl>
<Image Source="/Assets/timer.png"/>
</ContentControl>
</phone:PivotItem.Header>
<Grid>
<TextBlock Text="hello 3"/>
</Grid>
</phone:PivotItem>
</phone:Pivot>
I want to customized how the header looks. This is how i want the headers to align itself (see below image). I am not sure how it is to be done. Below is how i want it to look with the black grid and vertical pipes. Can anyone help me with this ? I think i will have to write a Style for same. However, I don't know in which way i can defined a style so that alignment is changed as per below.
The closer to what you want to achieve is this with no much effort:
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="PivotHeader">
<Grid Margin="-11,0,-11,0">
<Border BorderBrush="#FFF70000" BorderThickness="1">
<Grid Width="152" HorizontalAlignment="Center">
<Image Height="80" Source="{Binding}"></Image>
</Grid>
</Border>
</Grid>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<!--Pivot Control-->
<phone:Pivot HeaderTemplate="{StaticResource PivotHeader}">
<phone:PivotItem Header="/Assets/Clock.png">
<Grid>
<TextBlock Text="hello 1"/>
</Grid>
</phone:PivotItem>
<phone:PivotItem Header="/Assets/Clock.png">
<Grid>
<TextBlock Text="hello 2"/>
</Grid>
</phone:PivotItem>
<phone:PivotItem Header="/Assets/Clock.png">
<Grid>
<TextBlock Text="hello 3"/>
</Grid>
</phone:PivotItem>
</phone:Pivot>
</Grid>
However you will notice that a Pivot Control does not work like tabs on Android and iPhone.
I wouldn't recommend changing the behavior of the pivot control in Windows Phone either.
Maybe the best way to achieve what you are trying to do is to use buttons at the top of a pivot page and manually handle their behavior by modifying pivots selection changed.
In a Xaml/C# WinRT application, whenever a ListViewItem is selected, the first letter on the left gets chopped off. How can I prevent this?
<ListView>
<ListViewItem Content="Hello World"/>
</ListView>
Unselected and Full:
Selected and Truncated:
You can apply a margin to an item within the ListViewItem itself like below, which will stop the cut off. Alternatively you could use a ContentTemplate as the second example.
Example 1:
<ListView>
<ListViewItem>
<TextBlock Text="Hello World" Margin="5,0,0,0"/>
</ListViewItem>
</ListView>
Example 2:
<ListView>
<ListViewItem Content="Hello World!">
<ListViewItem.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" Margin="5,0,0,0"/>
</DataTemplate>
</ListViewItem.ContentTemplate>
</ListViewItem>
</ListView>
As a follow up to Brandon Scott's answer, if you would rather not apply this inline, you can set this behavior as a style and then apply that style to individual list items like so
<Application.Resources>
<ResourceDictionary>
<Style x:Key="ListViewItemMagin" TargetType="ListViewItem">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding}" Margin="5,0,0,0"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Application.Resources>
Then, apply the style to your list view items
<ListView>
<ListViewItem Content="Hello World" Style="{StaticResource ListViewItemMagin}"/>
</ListView>
If you want to enable this by default, you can omit the x:Key property on the style and it will automatically apply to any element matching the TargetType; like so:
<Style TargetType="ListViewItem">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding}" Margin="5,0,0,0"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>