I am trying to place a ScrollViewer around a TextBlock in XAML (here, the textblock is called ImageText). Here is my code:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="-20,0,-22,0">
<TextBlock x:Name="TextBlock1" HorizontalAlignment="Left" Margin="130,64,0,0" TextWrapping="Wrap" Text="Load the image here." VerticalAlignment="Top" Height="37" Width="555" FontSize="25"/>
<Button x:Name="LoadButton" Content="Load" HorizontalAlignment="Left" Margin="50,138,0,0" VerticalAlignment="Top" Height="87" Width="160" FontFamily="Global User Interface" Click="LoadButton_Click"/>
<Button x:Name="ExtractButton" Content="Extract" HorizontalAlignment="Left" Margin="240,138,0,0" VerticalAlignment="Top" Height="87" Width="160" FontFamily="Global User Interface" Click="ExtractButton_Click"/>
<Image x:Name="PreviewImage" HorizontalAlignment="Left" Height="296" Margin="76,292,0,0" VerticalAlignment="Top" Width="296"/>
<TextBlock x:Name="ExtractedTextBlock" HorizontalAlignment="Left" Margin="922,64,0,0" TextWrapping="Wrap" Text="Extracted Text:" VerticalAlignment="Top" FontSize="25" Width="173"/>
<ScrollViewer>
<TextBlock x:Name="ImageText" Margin ="922,100,0,0" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Text Not Extracted" VerticalAlignment="Top" Height="427" Width="380"/>
</ScrollViewer>
However, when I try to run the program, it for some reason none of the buttons work i.e. I cannot click them, and when I remove the ScrollViewer, everything works fine. What am I doing wrong? Thanks in advance.
You placed the Margin in the TextBlock instead of the ScrollViewer, change to the following:
<ScrollViewer Margin ="922,100,0,0" >
<TextBlock x:Name="ImageText" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Text Not Extracted" VerticalAlignment="Top" Height="427" Width="380"/>
</ScrollViewer>
And now will work. Anyway instead of doing this like you did I encourage you to use Grid.Rows and Columns or RelativePanel (Windows 10 Apps)
Related
I'm struggling to vertically center text using TextBlock. I know that it adds extra space above the space in case you use accents but why it isn't consistent with the space below then? There's a few extra pixels.
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="0,40,0,0" Background="#FF191919" BorderThickness="1" BorderBrush="#FFBF0077">
<Grid Width="41" HorizontalAlignment="Left" Padding="0" BorderThickness="0,0,1,0" BorderBrush="#FFBF0077">
<TextBlock x:Name="TextBlockLocalScore" Text="0" FontFamily="Courier New" Foreground="#FF007AFF" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
<Grid Padding="4,8" BorderThickness="8,0" Width="104">
<TextBlock x:Name="TextBlockMinutesLeft" Text="00" HorizontalAlignment="Left" FontSize="36" VerticalAlignment="Center" FontFamily="Segoe UI Light" FontWeight="Light" TextAlignment="Center" Height="27" TextLineBounds="Tight" Margin="0,0,4,0" />
<TextBlock x:Name="TextBlockSecondsLeft" Text="30" HorizontalAlignment="Right" FontSize="36" VerticalAlignment="Center" FontFamily="Segoe UI Light" FontWeight="Light" OpticalMarginAlignment="TrimSideBearings" TextAlignment="Center" Height="27" TextLineBounds="Tight" />
</Grid>
<Grid Width="41" HorizontalAlignment="Right" Padding="0,8" BorderThickness="1,0,0,0" BorderBrush="#FFBF0077">
<TextBlock x:Name="TextBlockRemoteScore" Text="0" HorizontalAlignment="Center" FontSize="36" VerticalAlignment="Center" FontFamily="Segoe UI Light" FontWeight="Light" OpticalMarginAlignment="TrimSideBearings" TextAlignment="Center" Height="27" TextLineBounds="Tight" Foreground="#FFFF3B30" />
</Grid>
</StackPanel>
I've played with Line Height and Text Line Bounds but I can't why a way to make the text still vertical centered once I change the font.
Updated code to reproduce issue:
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="0,100,0,0" Background="#FF191919" BorderThickness="1" BorderBrush="#FFBF0077">
<Grid Width="51" HorizontalAlignment="Left" Padding="0" BorderThickness="0,0,1,0" BorderBrush="#FFBF0077">
<TextBlock Text="0" FontFamily="Courier New" FontSize="36" Foreground="#FF007AFF" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
<StackPanel Padding="4" BorderThickness="8,0" Orientation="Horizontal">
<TextBlock Text="01" FontFamily="Courier New" FontSize="36" TextAlignment="Left" VerticalAlignment="Center" Margin="0,0,4,0" />
<TextBlock Text="11" FontFamily="Courier New" FontSize="36" TextAlignment="Right" VerticalAlignment="Center" />
</StackPanel>
<Grid Width="51" HorizontalAlignment="Right" Padding="0,8" BorderThickness="1,0,0,0" BorderBrush="#FFBF0077">
<TextBlock Text="0" FontFamily="Courier New" FontSize="36" Foreground="#FF007AFF" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
</StackPanel>
You should have a play with these two properties. In your case you are probably more interested in TextLineBounds.
<TextBlock Text="80" FontSize="40" TextLineBounds="Tight" OpticalMarginAlignment="TrimSideBearings" />
Update
I am not sure if your screenshot is 100% accurate. I have used your code to produce the following pictures. Note I have scaled them up by 10 times.
<Grid Width="41" HorizontalAlignment="Left" Padding="0" BorderThickness="0,0,1,0" BorderBrush="#FFBF0077">
<TextBlock x:Name="TextBlockLocalScore" TextLineBounds="Full" Text="80" FontFamily="Courier New" FontSize="36" Foreground="#FF007AFF" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" />
<Rectangle UseLayoutRounding="False" HorizontalAlignment="Center" Fill="White" Height="10" VerticalAlignment="Top" Width="1" Margin="-21,0,0,0" />
<Rectangle UseLayoutRounding="False" HorizontalAlignment="Center" Fill="White" Height="10" VerticalAlignment="Bottom" Width="1" Margin="-21,0,0,0" />
</Grid>
With TextLineBounds set to Tight
With TextLineBounds set to Full
Yes, on the first one, there's still a tiny little gap (about 0.3 epx) between the bottom edge of number 8 and the Line, but this is mostly due to layout rounding and effective pixel snapping. I don't think it's noticeable to human eyes. :)
P.S. You cannot purely rely on checking the visuals from Blend Designer as sometimes the artboard doesn't get updated on time to give you the correct result. You should always run your app and check from there.
I have tested your code and reproduced this behavior. If your have not set the height and width of TextBlock, it will set them based on your text font size automatically .
For example, If the FontFamily is Courier New and the font size is 25, and the actual width and height of TextBlock is 16.00244140625 , 29.3203125. It will generate deviation when you center the text vertically. However, you could manual correct it via modifying the Padding just like the follow
I found this question + answer to my problem here on stackoverflow, but for me its not totally clear where to change the
ListViewItemPresenter
I tried many things, but it seems like I cant find it on my own :(
Here is my XAML code for this frame:
<Page.Resources>
<DataTemplate x:Key="ItemListDataTemplate" x:DataType="data:Item">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Image Name="image" Source="{x:Bind CoverImage}" HorizontalAlignment="Center" Width="150" />
<StackPanel Margin="20,20,0,0">
<TextBlock Text="{x:Bind Name}" HorizontalAlignment="Left" FontSize="16" Name="NameTextBlock"/>
<TextBlock Text="{x:Bind Description}" HorizontalAlignment="Left" FontSize="10" Name="DescriptionTextBlock"/>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{x:Bind Price}" HorizontalAlignment="Left" FontSize="26" Name="PriceTextBlock"/>
<TextBlock Text="€" FontSize="26" Name="Currency" Margin="5,0,0,0"/>
</StackPanel>
</StackPanel>
</StackPanel>
</DataTemplate>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ListView ItemsSource="{x:Bind Items}"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
ItemClick="ListView_ItemClick"
IsItemClickEnabled="True"
ItemTemplate="{StaticResource ItemListDataTemplate}"
>
</ListView>
</Grid>
Can someone help me our please? Thank you very much for your time!
There are two ways to edit ListViewItemPresenter in your Page:
You can copy the XAML Template from here (the first XAML codes block below Default Style). Add it to your Page.Resources. ListViewItemPresenter lies among those XAML codes, you can edit its Properties and this style will be applied to all the items of this page's ListView. Notes: don't add x:Key to this style.
Add a ListViewItem Control to your Page like below:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ListViewItem></ListViewItem>
</Grid>
Document Outline->Select ListViewItem->Edit Template->Edit a Copy:
Remove the x:Key Property of generated Style Resource, so that this style will be applied to all ListViewItem. Then you can edit the ListViewItemPresenter in the generated XAML Resource.
Just add your DataTemplate inside of the Listview.
Put it in the ItemTemplate property.
<ListView ItemsSource="{x:Bind Items}"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
ItemClick="ListView_ItemClick"
IsItemClickEnabled="True" >
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Image Name="image" Source="{x:Bind CoverImage}" HorizontalAlignment="Center" Width="150" />
<StackPanel Margin="20,20,0,0">
<TextBlock Text="{x:Bind Name}" HorizontalAlignment="Left" FontSize="16" Name="NameTextBlock"/>
<TextBlock Text="{x:Bind Description}" HorizontalAlignment="Left" FontSize="10" Name="DescriptionTextBlock"/>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{x:Bind Price}" HorizontalAlignment="Left" FontSize="26" Name="PriceTextBlock"/>
<TextBlock Text="€" FontSize="26" Name="Currency" Margin="5,0,0,0"/>
</StackPanel>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I am trying to learn about adaptive UI. I use bootstrap alot, but am in the process of designing a Windows 10 app with xaml. I am wanting the textboxes and textbloxks to adjust based on if the user shrinks the window or not. This is what I have, but it is not adapting nor is it responsive.
<Grid Grid.Row="1">
<TextBlock HorizontalAlignment="Left" FontSize="24" Margin="10,22,0,0" Grid.Row="1" TextWrapping="Wrap" Text="Title" VerticalAlignment="Top"/>
<TextBox x:Name="txtBoxTitle" Margin="79,24,0,0" Grid.Row="1" Width="800" TextWrapping="Wrap" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<TextBlock HorizontalAlignment="Left" FontSize="24" Margin="10,131,0,0" Grid.Row="1" TextWrapping="Wrap" Text="Body" VerticalAlignment="Top"/>
<TextBox x:Name="txtBoxBody" Margin="79,133,-225,0" Grid.Row="1" Width="800" Height="500" TextWrapping="Wrap" AcceptsReturn="True" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<Button x:Name="btnSubmitArticle" Content="Submit" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="80,20,20,20" d:LayoutOverrides="Width"/>
</Grid>
Additional Question
How can I pull the text in the textbox all the way to the right of the window and have it respond correctly when the screen size changes.
<RelativePanel Margin="12,12">
<TextBlock x:Name="txtBoxDate"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True"
FontSize="14"
TextAlignment="Right"
TextWrapping="Wrap"
Text="Title" />
</RelativePanel>
Can anyone point me in the right direction to making these elements repsonsive depending on screen size?
Assuming that the whole row stretches, the problem is that you're setting Width of those elements (and some weird Margins, probably because you dragged and dropped the controls from the toolbox). You can use a RelativePanel to nicely stack the items and keep them stretched from left to right inside the panel:
<RelativePanel Margin="12,0">
<TextBlock x:Name="FirstTextBlock"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True"
FontSize="24"
TextWrapping="Wrap"
Text="Title" />
<TextBox x:Name="txtBoxTitle"
RelativePanel.Below="FirstTextBlock"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True"
Margin="0,8,0,0"
TextWrapping="Wrap" />
<TextBlock x:Name="SecondTextBlock"
RelativePanel.Below="txtBoxTitle"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True"
FontSize="24"
Margin="0,8,0,0"
TextWrapping="Wrap"
Text="Body" />
<TextBox x:Name="txtBoxBody"
RelativePanel.Below="SecondTextBlock"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True"
Margin="0,8,0,0"
Height="500"
TextWrapping="Wrap"
AcceptsReturn="True" />
<Button x:Name="btnSubmitArticle"
RelativePanel.Below="txtBoxBody"
Content="Submit"
Margin="0,8,0,0"
d:LayoutOverrides="Width"/>
</RelativePanel>
The vertical Scrollbar is visible in W 8.1 but not in WP 8.1 on my emulator.
What have i missed?
I have also tried to set VerticalScrollBarVisibility to Visible
<Popup x:Name="LayerPopupWindow" IsLightDismissEnabled="True" >
<ListBox x:Name="MyList" Margin="3" Width="auto" Background="#DDFFFFFF"
Height="{Binding Path=ActualHeight,ElementName=MyMapView}" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollMode="Enabled">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Height="auto" >
<CheckBox IsChecked="{Binding IsVisible, Mode=TwoWay}" BorderBrush="Black" MinWidth="30"/>
<TextBlock Text="{Binding ID, Mode=OneWay}" VerticalAlignment="Center" >
<ToolTipService.ToolTip>
<StackPanel MaxWidth="400">
<TextBlock FontWeight="Bold" Text="{Binding CopyrightText}" TextWrapping="Wrap" />
<TextBlock Text="{Binding Description}" TextWrapping="Wrap" />
</StackPanel>
</ToolTipService.ToolTip>
</TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Popup>
Looked at your links Depechie and tried it in my example, for some reason the scrollbars still wasnt visible.
Then i found this link
Making ScrollViewer's ScrollBar always visible through overriding or styling
Tried it and the scrollbars know were visible, so problem solved.
I'm developing a Windows Store App for Windows 8.1 for use with a specific kind of Surface Pro tablet.
While in the Designer, I lined up two TextBlocks exactly as I wanted them using a horizontal StackPanel and ran them in the Simulator (1920x1080) and they were aligned properly. When the same app was exported to the device (1920x1080), the text slanted downward, with each additional TextBlock bringing each TextBlock after it down by 2px.
How can I ensure that the items in the StackPanel don't move themselves downwards on my device? Thanks!
<StackPanel Grid.Column="1" HorizontalAlignment="Left" Orientation="Horizontal" Margin="0,0,30,40" VerticalAlignment="Bottom">
<TextBlock x:Name="pageTitle" Text="" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1"
IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" FontFamily="Global User Interface"/>
<StackPanel Grid.Column="1" HorizontalAlignment="Left" Orientation="Horizontal" Height="30" Margin="20,0,0,0" VerticalAlignment="Bottom" Width="867">
<TextBlock Text="{Binding A}" Style="{StaticResource SubheaderTextBlockStyle}" FontFamily="Global User Interface" HorizontalAlignment="Left" VerticalAlignment="Top" />
<TextBlock Margin="14,6,12,0" Text="" FontSize="18" FontFamily="Segoe UI Symbol" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<TextBlock Text="{Binding B}" Style="{StaticResource SubheaderTextBlockStyle}" FontFamily="Global User Interface" VerticalAlignment="Top" HorizontalAlignment="Left" />
<TextBlock Margin="14,6,12,0" Text="" FontFamily="Segoe UI Symbol" FontSize="18" HorizontalAlignment="Left" VerticalAlignment="Top" />
<TextBlock Text="{Binding C}" Style="{StaticResource SubheaderTextBlockStyle}" FontFamily="Global User Interface" VerticalAlignment="Top" HorizontalAlignment="Left" />
<TextBlock Margin="14,6,12,0" Text="" FontFamily="Segoe UI Symbol" FontSize="18" HorizontalAlignment="Left" VerticalAlignment="Top" />
</StackPanel>
</StackPanel>