I have added a grid control (I have added about 20 rows, each row contains 2 columns and each of them having text blocks as a child, and I am setting RowHeight as Auto) on top of scroll viewer. It's scrolling but not showing the full content of the grid. What could be the reason?
The issue will be that the framework can't determine the overall height to allocate to the control. Try setting the explicit height of the scrollviewer and/or the grid (if you can).
Update
Please post your exact code. (Or, at least code which recreates the issue.)
The following code is my understanding of what you've described but does not create the behaviour you are experiencing
<Grid x:Name="LayoutRoot" Background="Transparent">
<controls:Pivot Title="MY APPLICATION">
<controls:PivotItem Header="first">
<ScrollViewer>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Style="{StaticResource PhoneTextHugeStyle}" Text="A1" Grid.Column="0" Grid.Row="0" />
<TextBlock Style="{StaticResource PhoneTextHugeStyle}" Text="A2" Grid.Column="1" Grid.Row="0" />
<TextBlock Style="{StaticResource PhoneTextHugeStyle}" Text="B1" Grid.Column="0" Grid.Row="1" />
<TextBlock Style="{StaticResource PhoneTextHugeStyle}" Text="B2" Grid.Column="1" Grid.Row="1" />
<TextBlock Style="{StaticResource PhoneTextHugeStyle}" Text="C1" Grid.Column="0" Grid.Row="2" />
<TextBlock Style="{StaticResource PhoneTextHugeStyle}" Text="C2" Grid.Column="1" Grid.Row="2" />
<TextBlock Style="{StaticResource PhoneTextHugeStyle}" Text="D1" Grid.Column="0" Grid.Row="3" />
<TextBlock Style="{StaticResource PhoneTextHugeStyle}" Text="D2" Grid.Column="1" Grid.Row="3" />
<TextBlock Style="{StaticResource PhoneTextHugeStyle}" Text="E1" Grid.Column="0" Grid.Row="4" />
<TextBlock Style="{StaticResource PhoneTextHugeStyle}" Text="E2" Grid.Column="1" Grid.Row="4" />
<TextBlock Style="{StaticResource PhoneTextHugeStyle}" Text="F1" Grid.Column="0" Grid.Row="5" />
<TextBlock Style="{StaticResource PhoneTextHugeStyle}" Text="F2" Grid.Column="1" Grid.Row="5" />
<TextBlock Style="{StaticResource PhoneTextHugeStyle}" Text="G1" Grid.Column="0" Grid.Row="6" />
<TextBlock Style="{StaticResource PhoneTextHugeStyle}" Text="G2" Grid.Column="1" Grid.Row="6" />
<TextBlock Style="{StaticResource PhoneTextHugeStyle}" Text="H1" Grid.Column="0" Grid.Row="7" />
<TextBlock Style="{StaticResource PhoneTextHugeStyle}" Text="H2" Grid.Column="1" Grid.Row="7" />
<TextBlock Style="{StaticResource PhoneTextHugeStyle}" Text="I1" Grid.Column="0" Grid.Row="8" />
<TextBlock Style="{StaticResource PhoneTextHugeStyle}" Text="I2" Grid.Column="1" Grid.Row="8" />
<TextBlock Style="{StaticResource PhoneTextHugeStyle}" Text="J1" Grid.Column="0" Grid.Row="9" />
<TextBlock Style="{StaticResource PhoneTextHugeStyle}" Text="J2" Grid.Column="1" Grid.Row="9" />
</Grid>
</ScrollViewer>
</controls:PivotItem>
</controls:Pivot>
</Grid>
Related
I am working on windows universal platform app for windows-10.I designed my whole app and use a two font style in whole application.
1)Utsaah
2)Raavi
both font family properly working in desktop and tablate view.But when i run my app in emulator (Mobile view) that time both fonts are not affacted to my textblock means default font of mobile initialize so please suggest me a solution . I just attached screenshot also code.
Code:
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel x:Name="topbar" Background="#FFF4F4F4" Grid.Row="0" Grid.ColumnSpan="2">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button x:Name="back_deatil_button" Grid.Column="0" Click="back_deatil_button_Click" Background="Transparent" Style="{StaticResource ButtonStyle1}">
<Image Source="Images/bback_icon#2x.png" Height="25" Stretch="Fill"></Image>
</Button>
<TextBlock x:Name="product_details" Grid.Column="1" FontSize="14" Text="PRODUCT DETAILS" Foreground="#FFF05929" FontFamily="Raavi" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center" ></TextBlock>
</Grid>
</StackPanel>
<StackPanel x:Name="product_detail" Grid.ColumnSpan="2" Margin="0,10,0,10" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock x:Name="ProductName" FontSize="16" FontFamily="utsaah" VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="Bold"></TextBlock>
</StackPanel>
<Image Source="Images/top_large_shhadow.png" Grid.ColumnSpan="2" Grid.Row="2" VerticalAlignment="Top"></Image>
<StackPanel x:Name="product_img" Grid.ColumnSpan="2" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Top" Height="137" Margin="40,0,54,20" Width="239">
<Image x:Name="ProductImage" Source="{Binding image}" Height="137" Width="239" Margin="5"></Image>
</StackPanel>
<Image Source="Images/Products/top_large_shadow.png" Grid.ColumnSpan="2" Grid.Row="2" VerticalAlignment="Bottom"></Image>
<TextBlock Text="SKU :" Grid.Row="3" Grid.Column="0" HorizontalAlignment="Center" FontWeight="Bold" FontFamily="Utsaah" FontSize="14"></TextBlock>
<TextBlock x:Name="SKU" Grid.Row="3" Grid.Column="1" HorizontalAlignment="Left" FontFamily="Utsaah" FontSize="14"></TextBlock>
<Image Source="Images/Products/top_large_shadow.png" Margin="0,25,0,0" Grid.ColumnSpan="2" Grid.Row="3" VerticalAlignment="Bottom"></Image>
<TextBlock Text="Price :" Grid.Row="4" Grid.Column="0" HorizontalAlignment="Center" FontFamily="Utsaah" FontSize="14" FontWeight="Bold"></TextBlock>
<TextBlock x:Name="Price" Grid.Row="4" Grid.Column="1" HorizontalAlignment="Left" FontFamily="Utsaah" FontSize="14"></TextBlock>
<Image Source="Images/Products/top_large_shadow.png" Margin="0,25,0,0" Grid.ColumnSpan="2" Grid.Row="4" VerticalAlignment="Bottom"></Image>
<TextBlock Text="Qty :" x:Name="RowTotalQty" FontFamily="Utsaah" FontSize="14" Grid.Row="5" Grid.Column="0" HorizontalAlignment="Center" FontWeight="Bold"></TextBlock>
<TextBlock x:Name="TotalQty" Grid.Row="5" Grid.Column="1" HorizontalAlignment="Left" FontFamily="Utsaah" FontSize="14"></TextBlock>
<Image Source="Images/Products/top_large_shadow.png" Margin="0,25,0,0" Grid.ColumnSpan="2" Grid.Row="5" VerticalAlignment="Bottom"></Image>
<TextBlock Text="Special Price :" x:Name="RowSpecialPrice" Grid.Row="6" Grid.Column="0" HorizontalAlignment="Center" FontFamily="Utsaah" FontSize="11"></TextBlock>
<TextBlock x:Name="SpecialPrice" Grid.Row="6" Grid.Column="1" HorizontalAlignment="Left" FontFamily="Utsaah" FontSize="14"></TextBlock>
<Image Source="Images/Products/top_large_shadow.png" Margin="0,25,0,0" Grid.ColumnSpan="2" Grid.Row="6" VerticalAlignment="Bottom" ></Image>
<TextBlock Text="Status :" x:Name="RowStatus" Grid.Row="7" FontFamily="Utsaah" FontSize="14" Grid.Column="0" HorizontalAlignment="Center" FontWeight="Bold"></TextBlock>
<TextBlock x:Name="Status" Grid.Row="7" Grid.Column="1" FontFamily="Utsaah" FontSize="14" HorizontalAlignment="Left"></TextBlock>
<Image Source="Images/ttop_large_shadow.png" Margin="0,25,0,0" Grid.ColumnSpan="2" Grid.Row="7" VerticalAlignment="Bottom"></Image>
<TextBlock Text="Type :" FontFamily="Utsaah" x:Name="row_type" FontSize="14" Grid.Row="8" Grid.Column="0" HorizontalAlignment="Center" FontWeight="Bold"></TextBlock>
<TextBlock x:Name="ProductType" Grid.Row="8" FontFamily="Utsaah" FontSize="14" Grid.Column="1" HorizontalAlignment="Left"></TextBlock>
<Image Source="Imagesttop_large_shadow.png" Margin="0,25,0,0" Grid.ColumnSpan="2" Grid.Row="8" VerticalAlignment="Bottom"></Image>
<TextBlock Text="Associated :" Grid.Row="10" FontFamily="Utsaah" FontSize="14" Grid.Column="0" FontWeight="Bold" HorizontalAlignment="Center" x:Name="associated_prpduct" Visibility="Collapsed"></TextBlock>
<TextBlock x:Name="Associated" Grid.Row="10" FontFamily="Utsaah" FontSize="14" Grid.Column="1" HorizontalAlignment="Left" TextWrapping="Wrap" ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.IsVerticalRailEnabled="True"></TextBlock>
<Image Source="Images/Products/top_large_shadow.png" x:Name="row_total_qty_shadow" Margin="0,25,0,0" Grid.ColumnSpan="2" Grid.Row="9" VerticalAlignment="Bottom"></Image>
<TextBlock Text="Description :" FontFamily="Utsaah" x:Name="row_description" FontSize="14" Grid.Row="9" Grid.Column="0" HorizontalAlignment="Center" FontWeight="Bold"></TextBlock>
<StackPanel Grid.Column="1" Grid.Row="9" x:Name="pnl_description" Height="auto">
<ScrollViewer HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Height="50" VerticalScrollBarVisibility="Auto" Margin="0,0,0,6">
<TextBlock x:Name="Description" FontFamily="Utsaah" FontSize="14" Grid.Column="1" TextWrapping="Wrap" HorizontalAlignment="Stretch" Margin="0,0,10,0"></TextBlock>
</ScrollViewer>
</StackPanel>
</Grid>
<ProgressBar Name="mobile_back_loader" Visibility="Collapsed" IsIndeterminate="True" Foreground="#FFF05A2A" HorizontalAlignment="Stretch" Height="40" VerticalAlignment="Top" Margin="0,150,0,0" Grid.RowSpan="2"/>
</Grid>
Image:
Here is a list of 'recommended' fonts for UWP apps.
Guidelines for fonts
https://msdn.microsoft.com/windows/uwp/controls-and-patterns/fonts
These fonts are guaranteed to be available in all Win10 device families - desktop, mobile, iot, etc.
But, Utsaah and Raavi are not listed in the list.
The doc says:
Note If you use a font that's not in this list, your app may trigger
an automatic download of the font data from a Microsoft service.
and
UWP apps that will available on mobile devices should never use fonts for UI
content other than fonts in this list.
It's not recommended. :(
I am working on windows universal app. I have issue regarding Print functionality in UWP.In this issue when i click on print button it prints the invoice page which is dynamic designed but print not covered whole page layout.
I am just putting my xaml code.
<Grid Background="White">
<Grid Name="gridpopup" Visibility="Visible" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="200"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="78"></RowDefinition>
<RowDefinition Height="150"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" Margin="10,10,0,0" Grid.Row="0">
<TextBlock FontFamily="Arial Narrow" Text=" Print Order :" FontSize="20" Height="50" VerticalAlignment="Bottom" Foreground="#FFF05929" FontWeight="Bold" Margin="0,0,0,-10"/>
<TextBlock x:Name="invoice_inc_id" FontFamily="Arial Narrow" Text="{Binding id" FontSize="20" Height="40" VerticalAlignment="Top" Foreground="#FFF05929" FontWeight="Bold"/>
</StackPanel>
<StackPanel Grid.Row="1" BorderBrush="LightGray" BorderThickness="0,1,0,2">
<Image Name="logo" Height="70" Margin="220,10,220,0"/>
<StackPanel Orientation="Horizontal" Margin="10,35,0,0" Height="36">
<TextBlock FontFamily="Arial Narrow" Text=" Customer Name: " FontSize="18" Height="30" VerticalAlignment="Top" Foreground="Black" Margin="0,6,0,0"/>
<TextBlock Margin="15,7,0,0" Name="invoice_Customername" FontFamily="Arial Narrow" Text="{Binding customer_name}" FontSize="18" Height="24" VerticalAlignment="Top" Foreground="Black" />
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="12,10,-2,0" Height="36" HorizontalAlignment="Left" >
<TextBlock FontFamily="Arial Narrow" Text=" Phone/Email : " FontSize="18" Height="40" VerticalAlignment="Bottom" Foreground="Black" Margin="0,-4,0,0"/>
<TextBlock Margin="15,-5,0,0" Name="invoiceCustomeremail" FontFamily="Arial Narrow" Text="{Binding customer_email}" FontSize="18" Height="36" VerticalAlignment="Top" Foreground="Black" Width="210" />
</StackPanel>
</StackPanel>
<ListView Grid.Row="2" Name="lstinvoice" IsHitTestVisible="False" BorderBrush="LightGray" BorderThickness="0,0,0,1">
<ListView.Background>
<ImageBrush Stretch="Fill" ImageSource="Images/LoginImages/gradient_bg.png"/>
</ListView.Background>
<ListView.HeaderTemplate>
<DataTemplate>
<Grid Margin="0,5,0,8" Height="25">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="400"></ColumnDefinition>
<ColumnDefinition Width="200"></ColumnDefinition>
<ColumnDefinition Width="200"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="Name" Foreground="#FF020202" FontSize="24" FontWeight="Bold" FontFamily="Raavi" SelectionHighlightColor="#FFE05022" VerticalAlignment="Center" Margin="25,0,2,3" Height="31"></TextBlock>
<TextBlock Grid.Column="1" Text="Quantity" Foreground="#FF040404" FontSize="24" FontWeight="Bold" FontFamily="Raavi" SelectionHighlightColor="#FFE05022" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,-5,-9"></TextBlock>
<TextBlock Grid.Column="2" Text="Price" Foreground="#FF080808" FontSize="24" FontWeight="Bold" FontFamily="Raavi" SelectionHighlightColor="#FFE05022" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,30,-9"></TextBlock>
</Grid>
</DataTemplate>
</ListView.HeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Grid.Row="2">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="400"></ColumnDefinition>
<ColumnDefinition Width="200"></ColumnDefinition>
<ColumnDefinition Width="200"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" FontFamily="Arial Narrow" Text="{Binding name}" FontSize="18" Height="40" VerticalAlignment="Center" Foreground="Black" Margin="10,0,0,0" Width="400" TextWrapping="Wrap"/>
<TextBlock Grid.Column="1" FontFamily="Arial Narrow" Text="{Binding ordered_qty}" FontSize="18" Height="40" VerticalAlignment="Center" HorizontalAlignment="Right" Foreground="Black" Margin="0,0,28,0" Width="auto"/>
<TextBlock Grid.Column="2" FontFamily="Arial Narrow" Text="{Binding unit_price}" FontSize="18" Height="40" VerticalAlignment="Center" HorizontalAlignment="Right" Foreground="Black" Margin="0,0,40,0" Width="auto"/>
</Grid>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Grid Grid.Row="3" Grid.RowSpan="2" Name="disscount_pnl_detail" Width="450" VerticalAlignment="Top" HorizontalAlignment="Left">
<Grid.RowDefinitions>
<RowDefinition Height="22"></RowDefinition>
<RowDefinition Height="22"></RowDefinition>
<RowDefinition Height="22"></RowDefinition>
<RowDefinition Height="22"></RowDefinition>
<RowDefinition Height="22"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300"></ColumnDefinition>
<ColumnDefinition Width="150"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock FontFamily="Arial Narrow" Text="Sub Total : " Grid.Row="0" Grid.Column="0" FontSize="18" TextAlignment="Right" Foreground="Black" Height="22" />
<TextBlock Name="invoice_subtotal" Grid.Row="0" Grid.Column="1" Text="$0.00" HorizontalAlignment="Left" TextAlignment="Right" Foreground="#FFFF3400" FontSize="20" />
<TextBlock FontFamily="Arial Narrow" Text="Discount : " Grid.Column="0" Grid.Row="1" FontSize="18" TextAlignment="Right" Foreground="Black" Height="22" />
<TextBlock Text="$0.00" Name="invoice_discount" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Left" TextAlignment="Right" Foreground="#FFFF3400" FontSize="20" />
<TextBlock FontFamily="Arial Narrow" Text="Tax : " Grid.Row="2" Grid.Column="0" FontSize="18" TextAlignment="Right" Foreground="Black" Height="22" />
<TextBlock Text="$0.00" Name="invoice_tax" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Left" TextAlignment="Right" Foreground="#FFFF3400" FontSize="20" />
<TextBlock FontFamily="Arial Narrow" Text="Shipping And Handling : " FontSize="18" Foreground="Black" TextAlignment="Right" Grid.Row="3" Grid.Column="0" />
<TextBlock Name="invoice_shippingcharge" Text="$0.00" HorizontalAlignment="Left" Foreground="#FFFF3400" TextAlignment="Right" FontSize="20" Grid.Row="3" Grid.Column="1" />
<TextBlock FontFamily="Arial Narrow" Text="Grand Total :" FontSize="22" Foreground="Black" TextAlignment="Right" FontWeight="Bold" Grid.Row="4" Grid.Column="0"/>
<TextBlock Name="invoice_grandtotal" Text="$0.00" HorizontalAlignment="Left" Foreground="#FFFF3400" FontSize="20" TextAlignment="Right" Grid.Row="4" Grid.Column="1" />
</Grid>
</Grid>
</Grid>
</Page>
Image:
To fix this issue, you can set FontFamily for those TextBlock. Once you add FontFamily in those TextBlock, they will be printed properly.
We can set FontFamily in those TextBlock like <TextBlock Name="invoice_subtotal" FontFamily="Arial Narrow" .../> one by one. Or as all TextBlocks are using "Arial Narrow" font, we can set it in a style that target all TextBlocks in this Grid like
<Grid Name="gridpopup" Background="White" Visibility="Visible">
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontFamily" Value="Arial Narrow" />
</Style>
</Grid.Resources>
...
</Grid>
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;
In my XAML I have a listview. The item template of the listview contains a grid. This grid has 4 columns and 2 rows. Like so:
I want the left column be filled with an image and a colored bar under the image. My core problem is that the image will most of the time determine the height of the item. While the image max height is supposed to be defined by the rest of the item. So minimal 100 (Grid MinHeight="125" - Height="25" of the rect). Or larger if the text makes the item larger. But the text is supposed to define the height of the item. Not the image.
My current xaml is the following:
<Grid MinHeight="125">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="48" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" Width="100">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="{Binding Path=BitmapImage}" Stretch="UniformToFill" />
<Rectangle Grid.Row="1">
<Rectangle.Fill>
<SolidColorBrush Color="{Binding Path=Color}" />
</Rectangle.Fill>
</Rectangle>
</Grid>
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Path=Name}" FontWeight="ExtraBold" TextWrapping="Wrap" FontSize="16" />
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=Description}" TextWrapping="Wrap" FontSize="20" />
<TextBlock Grid.Row="0" Grid.RowSpan="2" Grid.Column="2" Text="{Binding Path=Type}" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap" FontSize="20" Margin="5" />
<TextBlock Grid.Row="0" Grid.Column="3" Text="{Binding Path=Distance, Converter={StaticResource DistanceConverter}}" FontSize="16" />
<Image Grid.Column="3" Grid.RowSpan="2" Source="/Images/appbar.next.rest.png" Stretch="Fill" Width="24" Height="24" />
</Grid>
http://darutk-oboegaki.blogspot.com/2011/07/binding-actualheight-and-actualwidth.html contains information on how to do this, accounting for the fact that in Silverlight, ActualHeight commonly gives a value of 0.
From there, if you need to subtract 25 pixels, you can:
Write a converter (an object that implements System.Windows.UI.Xaml.Data.IValueConverter)
Add an instance of the converter into the Resources of the page/window.
Add Converter={StaticResource MyConverter}, ConverterParameter=25 to your binding.
Hope that helps :)
<controls:PanoramaItem Header="Aylık" Foreground="White">
<Grid x:Name="monthlyPanaromaGrid" >
<Grid.Resources>
<Style TargetType="ListBoxItem" x:Key="ListItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</Grid.Resources>
<ScrollViewer HorizontalAlignment="Stretch" Height="Auto" VerticalAlignment="Stretch">
<ListBox x:Name="monthlyItemListBox" ScrollViewer.VerticalScrollBarVisibility="Auto" >
<ListBox.ItemTemplate >
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<TextBlock Text="{Binding Id}" FontSize="24" />
<TextBlock Text=" " FontSize="24" />
<TextBlock Text="{Binding Name}" FontSize="24" />
<TextBlock Text=" " FontSize="24" />
<TextBlock Text="{Binding Surname}" FontSize="24" />
<TextBlock Text=" " FontSize="24" />
<TextBlock Text="{Binding Age}" FontSize="24" />
<TextBlock Text=" " FontSize="24" />
<TextBlock Text="{Binding Status}" FontSize="24" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
</Grid>
</controls:PanoramaItem>
I tried my list with 50 members but ı cant view the scrollviewer what might cause the problem? Thanks I see some answers here and I tried but not working(Changing height ... etc) thanks.
ListBox already has a ScrollViewer, and the two controls will fight over your manipulations.
Remove the outer ScrollViewer, or set ScrollViewer.VerticalScrollBarVisibility="Disabled" on your ListBox to disable scrolling.
And not sure if you're using those TextBlocks for Margin, but you should either set the Margin directly, or use ColumnDefinitions and a Grid.
<controls:PanoramaItem Header="Aylık" Foreground="White">
<Grid x:Name="monthlyPanaromaGrid" >
<Grid.Resources>
<Style TargetType="ListBoxItem" x:Key="ListItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</Grid.Resources>
<ListBox x:Name="monthlyItemListBox" HorizontalAlignment="Stretch" ScrollViewer.VerticalScrollBarVisibility="Auto" >
<ListBox.ItemTemplate >
<DataTemplate>
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Id}" Grid.Column="0" FontSize="24" />
<TextBlock Text="{Binding Name}" Grid.Column="1" FontSize="24" />
<TextBlock Text="{Binding Surname}" Grid.Column="2" FontSize="24" />
<TextBlock Text="{Binding Age}" Grid.Column="3" FontSize="24" />
<TextBlock Text="{Binding Status}" Grid.Column="4" FontSize="24" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</controls:PanoramaItem>
or
<controls:PanoramaItem Header="Aylık" Foreground="White">
<Grid x:Name="monthlyPanaromaGrid" >
<Grid.Resources>
<Style TargetType="ListBoxItem" x:Key="ListItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</Grid.Resources>
<ListBox x:Name="monthlyItemListBox" HorizontalAlignment="Stretch" ScrollViewer.VerticalScrollBarVisibility="Auto" >
<ListBox.ItemTemplate >
<DataTemplate>
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Id}" Grid.Column="0" FontSize="24" />
<TextBlock Text="{Binding Name}" Margin="48,0,0,0" Grid.Column="1" FontSize="24" />
<TextBlock Text="{Binding Surname}" Margin="48,0,0,0" Grid.Column="2" FontSize="24" />
<TextBlock Text="{Binding Age}" Margin="48,0,0,0" Grid.Column="3" FontSize="24" />
<TextBlock Text="{Binding Status}" Margin="48,0,0,0" Grid.Column="4" FontSize="24" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</controls:PanoramaItem>