I have this XAML code:
<RichTextBlock>
<Paragraph>
hello
<Run Typography.Variants="Superscript">
hello
</Run>
</Paragraph>
</RichTextBlock>
Expected behavior: hellohello
What actually happens: hello hello
It works with some other fonts, such as Calibri.
Edit: Tested 7 months later, on latest Insider Release (14951) and still no fix. And feedback hub is broken on this release so I can't even report it...
Try this solution
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe UI" FontSize="16" Text="hello"/>
<TextBlock FontFamily="Segoe UI" FontSize="9" Text="hello"/>
</StackPanel>
if you want to use RichTextBlock is also works
<StackPanel Orientation="Horizontal">
<RichTextBlock FontFamily="Segoe UI" FontSize="16">
<Paragraph>
hello
</Paragraph>
</RichTextBlock>
<RichTextBlock FontFamily="Segoe UI" FontSize="9">
<Paragraph>
hello
</Paragraph>
</RichTextBlock>
</StackPanel>
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've got the problem, that I create an App, that will run on Windows Phone 8.1 and Windows 10 Mobile. This App is a non-UWP Windows Store App.
The problem I have is, that I have a list of a custom control that one has another List, that is not expanded (=collapsed). That looks like this:
The red rectangles are the ContentPresenter items of the first ItemControl and the green rectangles are the ContentPresenter items of the ItemControl in the first lists items, that is not visible on startup. It will be visible after the click on the expand-button. Both ItemControls have a DataTemplate configured to present what you see in the screenshot. (XAML code below)
The main problem I have is, that if I change the Pivot to the Pivot you see at the screenshot above, there is a freeze of the app for several seconds. It depends on the device how long this freeze is. In the W10M-Emulator on my PC I don't recognize a freeze but on a Lumia 620 with WP8.1 I have a freeze of 8.5 seconds.
In the profiler of Visual Studio it looks like this (I selected the range that is the problem I am talking about):
What I am wondering about is the large orange line with "Layout". If I expand it to the "big players", there is 60-70ms for each not visible item in the profiler.
I am asking myself why this is the case, even if the items are not visible and are in the VirtualizingStackPanel. The Number of Items of the ItemSourcein this example is 3 for the first ItemControl (red boxes) and 17, 59 and 1 for the second ItemControls that are only visible of the first item is expanded.
What I am also wondering about is, that regarding the timeline, all of the Items are processed at the same time because their baseline is for all items the same. But if I scroll down the profiler timeline details, I see another Event called "Parsing" for each item. That one is not processed in parallel for each item but serial. And the parsing of the last item fits to the end of the layout-event. This parsing events look like this:
What is the reason why the parsing takes so long time? I don't think that the controls are very complex etc. and there are no code behind procedures except some string formattings.
Finally here is the XAML code:
My PivotItem on the "MainPage" of the App:
<PivotItem
Header="Echtzeit"
Margin="10,-20,10,0"
>
<Grid>
<ScrollViewer
VerticalScrollBarVisibility="Visible"
>
<ItemsControl
ItemsSource="{Binding RealtimeDepartures, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
HorizontalAlignment="Stretch"
Margin="0"
>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<controls:RealtimeStation
StationName="{Binding StationName, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
Departures="{Binding DepartureList, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
FontSize="{Binding DataContext.ClientFontSize, ElementName=MainPg, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>
</PivotItem>
The RealtimeStation Control XAML:
<UserControl
...
>
<UserControl.Resources>
<dec:BoolToVisibilityConverter x:Key="BoolToVisibilityConv"/>
</UserControl.Resources>
<Grid>
<AppBarButton
HorizontalAlignment="Left"
VerticalAlignment="Top"
Grid.Column="0"
Name="btnExpand"
Icon="{Binding ExpandButtonIcon, ElementName=main, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
Click="btnExpand_Click"
IsEnabled="{Binding IsExpandButtonEnabled, ElementName=main, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
IsCompact="True"
Margin="0,-8,-2,-4"
/>
<StackPanel
Orientation="Vertical"
Margin="48,12,0,0"
>
<TextBlock
Text="{Binding StationName, ElementName=main, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
VerticalAlignment="Center"
FontSize="24"
/>
<TextBlock
Text="Derzeit stehen keine Abfahrten an"
FontStyle="Italic"
Visibility="{Binding ShowNoDepartures, ElementName=main, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
FontSize="{Binding FontSize, ElementName=main, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
/>
<TextBlock
Text="Zugausfälle vorhanden!"
Foreground="Red"
FontWeight="Bold"
Visibility="{Binding ShowTrainCanceled, ElementName=main, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
FontSize="{Binding FontSize, ElementName=main, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
/>
<ItemsControl
ItemsSource="{Binding DepartureList, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
ScrollViewer.VerticalScrollBarVisibility="Visible"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Margin="-48,0,0,0"
Visibility="{Binding IsExpanded, ElementName=main, UpdateSourceTrigger=PropertyChanged, Mode=OneWay, Converter={StaticResource BoolToVisibilityConv}}"
>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<ContentPresenter>
<controls:RealtimeDeparture
DepartureDetails="{Binding}"
FontSize="{Binding FontSize, ElementName=main, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
/>
</ContentPresenter>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</Grid>
</UserControl>
And finally the RealtimeDeparture Control:
<UserControl
...
>
<Grid>
<control:DisruptionIcon
Height="24"
Width="50"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Icon="{Binding TrainIcon, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
Margin="3"
/>
<StackPanel
Orientation="Vertical"
Margin="56,9,0,0"
>
<StackPanel
Orientation="Horizontal"
Margin="3,0"
VerticalAlignment="Center"
>
<TextBlock
Text="{Binding DelayTimeText, ElementName=main, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"
Foreground="{Binding DelayColor, ElementName=main, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"
/>
<TextBlock
Text="{Binding DepartureDetailsText, ElementName=main, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"
Margin="3,0"
/>
</StackPanel>
<TextBlock
Text="{Binding InformationText, UpdateSourceTrigger=PropertyChanged, Mode=OneWay, ElementName=main}"
Visibility="{Binding IsInformationVisible, UpdateSourceTrigger=PropertyChanged, Mode=OneWay, ElementName=main}"
Margin="3"
FontStyle="Italic"
TextWrapping="Wrap"
/>
<TextBlock
Text="Zug fällt aus!"
Foreground="Red"
FontWeight="Bold"
Visibility="{Binding IsCanceledVisible, UpdateSourceTrigger=PropertyChanged, Mode=OneWay, ElementName=main}"
Margin="3"
/>
</StackPanel>
</Grid>
</UserControl>
Does anybody has an idea how to speed up this parsing? What is the reason why it is so slow? Do I have a design issue that is disabling the virtualization-functionality of the VirtualizedStackPanel? I already tried a lot but didn't find the reason why it is so slow.
I don't think virtualization is turned on.
Try setting the CanContentScroll property to true on your ScrollViewer:
<ScrollViewer
CanContentScroll="true"
VerticalScrollBarVisibility="Visible"
>
The other option can be using e.g. ListBox which supports virtualization on its own (as far as I know it is enough to set the ItemsPanelTemplate to VirtualizingStackPanel)
Hi how to make this button:
<Button x:Name="StartButton" Background="Transparent" Click="StartButton_Click">
<Button.Content>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<TextBlock FontSize="18" FontFamily="Segoe MDL2 Assets" Text=" " VerticalAlignment="Center"/>
<TextBlock FontSize="18" Text="Start"/>
</StackPanel>
</Button.Content>
</Button>
to fill its parent (horizontally) and to have its content aligned left?
This is the answer:
<Button x:Name="StartButton" Background="Transparent" HorizontalAlignment="Stretch" HorizontalContentAlignment="Left">
<TextBlock FontSize="18">
<Run FontFamily="Segoe MDL2 Assets" Text=" "/>
<Run Text="Start"/>
</TextBlock>
</Button>
In order to obtain the expected result, I recommend using <Run> to define the inlines of your TextBlock
This should look like :
<Button x:Name="StartButton" Background="Transparent" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Click="StartButton_Click">
<TextBlock FontSize="18" HorizontalAlignment="Left">
<Run FontFamily="Segoe MDL2 Assets" Text=" "/>
<Run Text="Start"/>
</TextBlock>
</Button>
I have a ListView and I want to put a border around each item in the ListView. Microsoft doesn't seem to have a system theme for the Border element.
What is the recommended way to theme the border so it looks good on Dark and Light theme?
Here is my ListView
<ListView ItemsSource="{Binding Products}" Header="My Header" Margin="10,5,10,5">
<ListView.HeaderTemplate>
<DataTemplate>
<TextBlock Text="My Header" Style="{ThemeResource HeaderTextBlockStyle}" />
</DataTemplate>
</ListView.HeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<Border>
<StackPanel>
<TextBlock Text="{Binding Name}"
Style="{StaticResource TitleTextBlockStyle}" />
<TextBlock Text="TextBlock 1:"
Style="{StaticResource ControlHeaderTextBlockStyle}" />
<TextBox Text="{Binding TextBlock1}"/>
<TextBlock Text=" TextBlock 2:"
Style="{ThemeResource ControlHeaderTextBlockStyle}"/>
<TextBox Text="{Binding TextBlock2}"/>
</StackPanel>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
**************Edit 1****************
I should have put this. I want it in a Universal App targeted at WP8.1 and Windows 8.1, not just phone.
You probably just want the standard foreground color, right? (dark for light, light for dark). That would be the PhoneContrastForegroundBrush.
<Border BorderThickness="1" BorderBrush="{StaticResource PhoneContrastForegroundBrush}">
The previous answers lead me to look at system brushes and I found ApplicationForegroundThemeBrush, which I believe will work.
I need my program to start up with an login-screen, but I can not figure out how to make it look pretty.
I tried with a code, that looks like the following, but I do not think it is the "true way" to do it
<Page.Resources>
<Grid Style="{StaticResource LayoutRootStyle}">
<TextBlock x:Name="pageTitle" Grid.Column="1" Text="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}"/>
</Grid>
<TextBlock HorizontalAlignment="Left" Margin="647,31,0,0" Grid.Row="1" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
<TextBox HorizontalAlignment="Left" Margin="634,62,0,0" Grid.Row="1" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top"/>
<TextBlock HorizontalAlignment="Left" Margin="647,128,0,0" Grid.Row="1" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
<TextBox HorizontalAlignment="Left" Margin="634,167,0,0" Grid.Row="1" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top"/>
<Button Content="Button" HorizontalAlignment="Left" Margin="632,243,0,0" Grid.Row="1" VerticalAlignment="Top"/>
Can anybody tell me how to create a pretty login-screen as start-screen
I have though of a dialog, as it should not be possible to go back to it, but how can I create it with an empty background?
UPDATE
Thanks to DanielRozo in his answer below, my code now looks like this
<Popup IsOpen="True" Margin="200" Height="260" Width="900">
<Grid Height="250">
<TextBlock Style="{StaticResource HeaderTextStyle}" Text="Login" Margin="0" HorizontalAlignment="Center" VerticalAlignment="Top" Height="50" />
<TextBlock Style="{StaticResource ResourceKey=SubheaderTextStyle}" Text="" Margin="0,63,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" />
<TextBox Name="InputUsername" Margin="0,63,0,0" HorizontalAlignment="Right" Height="40" Width="650"/>
<TextBlock Style="{StaticResource ResourceKey=SubheaderTextStyle}" Text="" Margin="0,138,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<PasswordBox Name="InputPassword" Margin="0,0,138,0" HorizontalAlignment="Right" VerticalAlignment="Top" Height="40" Width="650" />
<Button Name="Login" Content="" Margin="200,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom" />
<Button Name="Cancel" x:Uid="LoginPopupCancel" Content="" Margin="300,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom" />
</Grid>
</Popup>
But it does not work, when I rotate the screen, so I created this question
I also needs help to figure out how to set the page to a login-page
How about using the Popup class? I think it's a better approach of what you want. Something like:
<Popup Margin="200" IsOpen="True">
<Grid Margin="0" Height="322" Width="865">
<TextBlock Text="App Name Login" Style="{StaticResource HeaderTextStyle}" Margin="252,4,200,266"></TextBlock>
<TextBlock Text="User" Style="{StaticResource ResourceKey=SubheaderTextStyle}" Margin="244,63,498,223"/>
<TextBox x:Name="user" Margin="440,62,180,216"></TextBox>
<TextBlock Text="Pass" Style="{StaticResource ResourceKey=SubheaderTextStyle}" Margin="244,137,498,149"/>
<TextBox x:Name="pass" Margin="440,138,180,138"></TextBox>
<Button Name="Login" Content="Login" Margin="613,230,0,54"></Button>
<Button Name="Cancel" Content="Cancel" Margin="489,230,0,54"></Button>
</Grid>
</Popup>
Actually, I'd highly suggest the Web Auth Broker. If the user is auth'd using their LiveID, the WAB will provide you that credential, allowing you to not have to have credential re-entry for connected accounts. :)
I know that you've already marked another question as answer, but if you need to log in users into your app I think you should definitely take a look at the SplashScreen API. Overriding the default splashscreen, you'll have the users being always prompted with the username/password fields every time the app starts; moreover, you can never go back to the splashscreen, which is exactly what you say you need.
You should look at this sample: http://code.msdn.microsoft.com/windowsapps/Splash-screen-sample-89c1dc78 . I also suggest you to download Evernote from the market: trying an app made with the Splashscreen API may give you a better idea of what I'm saying.