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.
Related
I have a slider within a user control. When testing it out, the slider won't move if it is kept within the user control but works outside of it. Is there something that's needed to make it work?
The XAML for the usercontrol:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="4,0,3,0" Grid.RowSpan="1">
<TextBlock Text="15 mins" VerticalAlignment="Center" FontSize="16" Margin="0,-11,0,0" TextLineBounds="Tight" Foreground="White"/>
<Slider Foreground="White" SmallChange="50" TickFrequency="50" LargeChange="50" Background="#BFFFFFFF" Value="50" Margin="5,0" VerticalAlignment="Center" Width="250" StepFrequency="50" Maximum="100" ValueChanged="Slider_ValueChanged"/>
<TextBlock Text="1 hour" VerticalAlignment="Center" FontSize="16" Margin="0,-11,0,0" TextLineBounds="Tight" Foreground="White"/>
</StackPanel>
<ListBox x:Name="TimesList" DataContext="{Binding}" Background="{x:Null}" Foreground="White">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Width="365" DataContext="{Binding}">
<TextBlock Foreground="White" Text="{Binding}" HorizontalAlignment="Stretch" FontSize="29.333"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Border Grid.RowSpan="2" BorderBrush="#B2FFFFFF" BorderThickness="2,0,2,2" Padding="0" Margin="-5,0,-5,-5"/>
</Grid>
I found that 60 pixels height is not enough for Slider control. That's why it doesn't work. But there are few easy ways to fix it. You can choose whatever fits your needs.
Option 1
Change the first row definition height to Auto. So the Grid will as high as the Slider control. It's 84 pixels.
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
Option 2
The way you use Grid layout makes it pretty much the same as StackPanel. So you could also replace this Grid with StackPanel.
Option 3
You na change Sldier's margins to fit 60 pixels height. Set the bottom margin to -24.
<Slider Foreground="White" SmallChange="50" TickFrequency="50" LargeChange="50" Background="#BFFFFFFF" Value="50" Margin="5,0,5,-24" VerticalAlignment="Center" Width="250" StepFrequency="50" Maximum="100" ValueChanged="Slider_ValueChanged"/>
I'm developing a windows phone 8 application.
I've got a textblock with a price in it.
Only thing I want to do is a line through the textblock.
I've tried to use the Line function but that one doesn't work because the textblock has a variable length.
Does anyone know how I can make this happen?
This worked for me thanks to Chkon for giving me the answer in this thread:
<Grid HorizontalAlignment="Left" VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Some text" VerticalAlignment="Top" Grid.RowSpan="2"/>
<Border BorderThickness="0,0,0,1" BorderBrush="#FF949494" >
</Border>
</Grid>
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.
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>
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.