In Orientation="Horizontal" TextWrapping not working below code please check the mistake tell me.
Mycode:
<StackPanel>
<StackPanel Orientation="Horizontal" Width="400">
<TextBlock Text="dfgdfdgdfgfdgdfg" Foreground="AntiqueWhite" FontSize="30" TextWrapping="Wrap"/>
<TextBlock Text=" vs " FontSize="30" Foreground="White" TextWrapping="Wrap"/>
<TextBlock Text="Indiaafda (text)" Foreground="Bisque" FontSize="30" TextWrapping="Wrap"/>
</StackPanel>
</StackPanel>
I wnat like this:
South AfricaTeamPlayed vs west
Indies (test)
but output display this,
South AfricaTeamPlayed vs west
Indies (test)
Thanks
You should use a Grid instead of StackPanel.
Something like this,
<Grid Width="400" Margin="40,0">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="dfgdfdgdfgfdgdfg" Foreground="AntiqueWhite" FontSize="30" TextWrapping="Wrap"/>
<TextBlock Text=" vs " FontSize="30" Foreground="White" TextWrapping="Wrap" Grid.Column="1"/>
<TextBlock Text="Indiaafda (text)" Foreground="Bisque" FontSize="30" TextWrapping="Wrap" Grid.Column="2"/>
</Grid>
I will probably re-design the whole thing to be something like this,
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid d:LayoutOverrides="Height" Margin="40,0">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="dfgdfdgdfgfdgdfg" Foreground="AntiqueWhite" FontSize="30" TextWrapping="Wrap"/>
<TextBlock Text=" vs " FontSize="30" Foreground="White" TextWrapping="Wrap" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Text="Indiaafda (text)" Foreground="Bisque" FontSize="30" TextWrapping="Wrap" Grid.Column="2"/>
</Grid>
<Grid Grid.Row="1">
<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="where other stuff goes" VerticalAlignment="Center"/>
</Grid>
</Grid>
UPDATE
<Grid VerticalAlignment="Top" Margin="40,0">
<TextBlock Foreground="AntiqueWhite" FontSize="30" TextWrapping="Wrap">
<Run Text="south africa"/>
<Run Text="vs"/>
<Run Text="windows phone"/>
</TextBlock>
</Grid>
Delete Width property of Stack Panel and then try.
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 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.
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;
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.