I have below code
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent" Loaded="LayoutRoot_Loaded">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="70"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<TextBlock x:Name="ApplicationTitle" FontWeight="Bold" Padding="20,0,0,0" Grid.Row="0" Text="فرآن کریم"/>
<ListBox x:Name="myListBox" Grid.Row="1" Padding="0,0,0,0" ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Background="{Binding Converter={StaticResource AlternateRowConverter}}" Tap="pQuranAya_Tap">
<TextBlock Width="Auto" Text="{Binding Aya}" Foreground="Black" FontSize="50" Padding="20,0,0,20" TextWrapping="Wrap" Tap="TextBlock_Tap" />
<StackPanel Background="Black" />
<TextBlock Width="Auto" Text="{Binding AyaTranslation}" Foreground="Black" FontSize="35" Padding="20,0,0,20" TextWrapping="Wrap" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I want textblock should be always in window size, but its text size. How can I make it to fill the window size?
Thanks,
Remove <TextBlock Width="Auto" and add <TextBlock HorizontalAlignment="Stretch". After that, your textblock will fit the parent container (window, grid, stackpanel).
Remove Padding="20,0,0,20" And Margin (if You have in that Code )
Related
Below is my XAML part of windows Phone 8.1.
<Grid Background="#FAE8C9">
<ListView x:Name="articleListing">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Margin="5,5,5,5">
<StackPanel Background="#FFFEDC" RequestedTheme="Light" Tapped="RedirectToArticle" Tag="{Binding URL}" >
<StackPanel Orientation="Horizontal" >
<StackPanel Margin="10 0 0 0" Width="{Binding Width}">
<StackPanel VerticalAlignment="Top">
<TextBlock TextWrapping="Wrap" Text="{Binding HeadLine}" FontSize="22"/>
</StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
<Image Source="/Images/cal.png" Width="20" />
<TextBlock Text="{Binding UpdatedAtDate}" FontSize="18" Foreground="#CEBFA5" />
<Image Source="/Images/clock.png" Width="20"/>
<TextBlock Text="{Binding UpdatedAtTime}" FontSize="18" Foreground="#CEBFA5" />
</StackPanel>
</StackPanel>
<StackPanel Background="Transparent" Width="{Binding Width}" >
<Image Source="{Binding ImageURL}" />
</StackPanel>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
In this, I have tried to make the below part as vertical alignment to the bottom. But it doesn't work.
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
<Image Source="/Images/cal.png" Width="20" />
<TextBlock Text="{Binding UpdatedAtDate}" FontSize="18" Foreground="#CEBFA5" />
<Image Source="/Images/clock.png" Width="20"/>
<TextBlock Text="{Binding UpdatedAtTime}" FontSize="18" Foreground="#CEBFA5" />
</StackPanel>
</StackPanel>
Please help me to solve this issue. Thank you
Most XAML containers like list views and stack panels fill from top to bottom and their height is equal to the sum of the heights of their contents.
If you've got something you want to appear at the bottom of the container you have the following choices:
Use a canvas of the desired dimensions and explicitly place each element on the canvas. This loses you a big benefit of XAML - namely that it reacts to changes in the available space and repositions elements for you.
Insert some padding into your layout to force elements to be in the place you want them to be. Again you might lose the ability to change view size etc.
You might find using a Grid rather than a StackPanel gives you a bit more control over placement - but again usually the row heights and column widths are governed by the sizes of the elements contained therein.
Use This code.
<Grid Background="#FAE8C9">
<ListView x:Name="articleListing">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Margin="5,5,5,5">
<StackPanel Background="#FFFEDC" RequestedTheme="Light" Tapped="RedirectToArticle" Tag="{Binding URL}" >
<StackPanel Orientation="Horizontal" >
<Grid Margin="10 0 0 0" Width="{Binding Width}">
<StackPanel VerticalAlignment="Top">
<TextBlock TextWrapping="Wrap" Text="{Binding HeadLine}" FontSize="22"/>
</StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
<Image Source="/Images/cal.png" Width="20" />
<TextBlock Text="{Binding UpdatedAtDate}" FontSize="18" Foreground="#CEBFA5" />
<Image Source="/Images/clock.png" Width="20"/>
<TextBlock Text="{Binding UpdatedAtTime}" FontSize="18" Foreground="#CEBFA5" />
</StackPanel>
</Grid>
<StackPanel Background="Transparent" Width="{Binding Width}" >
<Image Source="{Binding ImageURL}" />
</StackPanel>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
This might be work for you.
Hi i have one listview with datatemplate with items
Visibility="Visible" ScrollViewer.VerticalScrollMode="Auto"
Height="{Binding ElementName=stck_main,Path=ActualHeight}"
SelectionChanged="lst_OutletDetails_SelectionChanged">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Margin" Value="5,0,0,0" />
<!--<Setter Property="Background" Value="Green"/>
<Setter Property="Opacity" Value="0.8"/>
<Setter Property="Height" Value="80"/>-->
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="100" >
<Rectangle Fill="Orange" Width="5"/>
<Grid x:Name="grd_items_outletdetails" Background="{Binding ItemBackground}" Width="{Binding ElementName=lst_OutletDetails,Path=ActualWidth}">
<Grid.ColumnDefinitions>
<ColumnDefinition ></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition ></RowDefinition>
<RowDefinition ></RowDefinition>
<RowDefinition ></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Text="{Binding OutletName}" Margin="5,0,0,0" Foreground="White" FontSize="22" Grid.Row="0" />
<TextBlock Text="{Binding LastVisitedDate}" VerticalAlignment="Center" Foreground="White" FontSize="18"
Grid.Row="0" Margin="5,0,40,0" HorizontalAlignment="Right" />
<TextBlock Text="{Binding OutletCode}" Foreground="White" Margin="5,0,0,0" FontSize="18" HorizontalAlignment="Left" Grid.Row="1"/>
<StackPanel Orientation="Horizontal" Margin="5,0,20,0" Grid.Row="1" HorizontalAlignment="Right">
<TextBlock Text="ISM:" Foreground="White" Margin="0,0,0,0" FontSize="18" />
<TextBlock Text="{Binding ISMName}" Foreground="White" Margin="5,0,20,0" FontSize="18" />
</StackPanel>
<TextBlock Text="{Binding Route}" Margin="5,0,0,0" FontSize="18" Grid.Row="2" HorizontalAlignment="Left" Foreground="White" />
<StackPanel Orientation="Horizontal" Margin="5,0,20,0" Grid.Row="2" HorizontalAlignment="Right">
<TextBlock Text="Status:" Foreground="White" Margin="5,0,0,0" FontSize="18" ></TextBlock>
<TextBlock Text="{Binding Status}" Foreground="White" Margin="5,0,20,0" FontSize="18" />
</StackPanel>
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
i want to change the colors of few items ,,, using mvvm pattern in windows phone 8.1
Put your question (problem) outside the codeblocks, it's hidden now.
What do you exactly want to do? Do you want to change the background color of few elements on your listbox? Describe it more precisely :)
As I can see you bind the ItemBackground property to your Grid Background, so just change the ItemBackground of elements you want in your source collection.
I have designed an expanderview in windows phone.
And now I want to select the expanded item and navigate it to other page.How to navigate it.
My Xaml code for expanderview
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</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" Text="TeluguOne"
Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="Videosongs" Margin="9,-7,0,0"
Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<toolkit:ExpanderView Header="Latest movies" x:Name="expander"
Margin="0,0,0,20" FontSize="35"
Style="{StaticResource ExpanderViewStyle1}" >
<toolkit:ExpanderView.Items>
<TextBlock FontSize="25" Text="Julayi" Foreground="Gray" />
<TextBlock FontSize="25" Text="ShiridiSai" Foreground="Gray" />
<TextBlock FontSize="25" Text="Srimanarayana" Foreground="Gray" />
<TextBlock FontSize="25" Text="Sudigadu" Foreground="Gray" />
</toolkit:ExpanderView.Items>
</toolkit:ExpanderView>
<toolkit:ExpanderView Header="New movies" FontSize="35" x:Name="expander1"
Margin="0,0,0,20"
Style="{StaticResource ExpanderViewStyle3}" >
<toolkit:ExpanderView.Items>
<TextBlock FontSize="25" Text="Dookudu" Foreground="Gray"/>
<TextBlock FontSize="25" Text="Mr.Perfect" Foreground="Gray" />
<TextBlock FontSize="25" Text="Raccha" Foreground="Gray"/>
<TextBlock FontSize="25" Text="Teenmar" Foreground="Gray" />
</toolkit:ExpanderView.Items>
</toolkit:ExpanderView>
<toolkit:ExpanderView Header="Old movies" FontSize="35" x:Name="expander2"
Style="{StaticResource ExpanderViewStyle2}" >
<toolkit:ExpanderView.Items>
<TextBlock FontSize="25" Text="Mayabazar" Foreground="Gray"/>
<TextBlock FontSize="25" Text="Alluddin Adbhutha Deepam"
Foreground="Gray" TextWrapping="Wrap"/>
</toolkit:ExpanderView.Items>
</toolkit:ExpanderView>
</StackPanel>
</Grid>.
MY screenshot of the expaderview is
In the above screenshot i need to select julayi and one after the other movies and navigate to other page.
Please anybody help me how can I select the expanded items and perform events on it.
Many Thanks
I've got a Scrollviewer which has a StackPanel (which contain ExpanderViews)
I'm updating the ScrollViewer VerticalOffset when the ExpanderViews are expanded. However the Scrollviewer doesn't scroll up at all.
The only time the scrollviewer scrolls to a vertical offset is from within FScrollViewer_LayoutUpdated() method. (This is tied to the LayoutUpdated event of ScrollViewer)
Is there any way to update the VerticalOffset (or ScrollToVerticalOffset) from another method?
<Grid x:Name="FilterGrid" Height="696" Grid.Row="0" Background="White">
<Grid.Projection>
<PlaneProjection/>
</Grid.Projection>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer x:Name="FScrollViewer" toolkit:TiltEffect.SuppressTilt="True" LayoutUpdated="FScrollViewer_LayoutUpdated"
MouseMove="FScrollViewer_MouseMove" Width="{Binding ElementName=FilterGrid, Path=ActualWidth}" Height="{Binding ElementName=FilterGrid, Path=ActualHeight}" >
<StackPanel Name="StackPanel" Margin="50,0,0,0" >
<StackPanel x:Name="Header" Height="65" Orientation="Horizontal" Background="Transparent" >
<TextBlock x:Name="HeaderTextBlock" Text="Random text" Style="{StaticResource PhoneTextTitle2Style}" TextTrimming="WordEllipsis" FontWeight="SemiBold" Foreground="Black" Margin="60,5,5,5" VerticalAlignment="Center"/>
</StackPanel>
<Line Width="Auto" StrokeThickness="1.5" Stretch="Fill" Stroke="Gray" X1="2" />
</StackPanel>
</ScrollViewer>
</Grid>
In ListBox with ItemTemplate second TextBlock not align to right.
In design mode second TextBlock align to right
<ListBox >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock
Grid.Column="0" Padding="10" HorizontalAlignment="Left"
Text="{Binding Display}" FontSize="30"
/>
<TextBlock
Grid.Column="1" HorizontalAlignment="Right"
Text="{Binding Length}" FontSize="30"
/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBoxItem>
<Grid>
<TextBlock
Grid.Column="0" Padding="10" HorizontalAlignment="Left"
Text="2014-01-24 23:00:00" FontSize="30"
/>
<TextBlock
Grid.Column="1" HorizontalAlignment="Right"
Text="00:00" FontSize="30"
/>
</Grid>
</ListBoxItem>
</ListBox>
Result:
Item in designer:
You need to change HorizontalContentAligment to Strech - to fill the space with your item, by default it's set to the left:
<ListBox Name="myList">
<ListBoxItem HorizontalContentAlignment="Stretch">
<Grid>
<TextBlock HorizontalAlignment="Left" Text="2014-01-24 23:00:00" FontSize="30"/>
<TextBlock HorizontalAlignment="Right" Text="00:00" FontSize="30"/>
</Grid>
</ListBoxItem>
</ListBox>
You can also set Property of ItemContainerStyle:
<ListBox>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock Padding="10" HorizontalAlignment="Left" Text="{Binding Display}" FontSize="30"/>
<TextBlock HorizontalAlignment="Right" Text="{Binding Length}" FontSize="30"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBoxItem>
<Grid>
<TextBlock Padding="10" HorizontalAlignment="Left" Text="2014-01-24 23:00:00" FontSize="30"/>
<TextBlock Padding="10" HorizontalAlignment="Right" Text="00:00" FontSize="30"/>
</Grid>
</ListBoxItem>
</ListBox>
In case you have only two items, one aligned to left, one to right - I've removed Colums. Although they help to manage the content, align it and they also will be helpful if you need to wrap text and/or perform more operations on it.
This is how you can do it :
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="0" Padding="10" HorizontalAlignment="Left"
Text="{Binding Display}" FontSize="30"
/>
<TextBlock
Grid.Column="1" HorizontalAlignment="Right"
Text="{Binding Length}" FontSize="30"
/>
</Grid>
This will give 75% width to the first column and remaining 25% to the second column.
If you want the first and second columns to dynamically change width according to the content then you can give one width as "Auto" and the other no width property (or Width="*") which means it will take the remaining area as the column width.
I would take Alexandr Sulimov solution. I made some improvements. I think it is the best way to do it.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Padding="10" Text="{Binding Display}" FontSize="30" />
<TextBlock Grid.Column="1" Text="{Binding Length}" FontSize="30" />
</Grid>