I have the follow XAML code which gives a students score for a course (these are the green, yellow and red bars, they are TextBlocks) the grey bars next to them are the standard deviation scores, they are Rectangles. The grey bars need to be underneath the colored bars.
I have tried to use ZIndex but this didn't change anything.
It does overlap with the horizontal lines with the numbers next to them, these are also Rectangles.
I have to use textblocks for the colored ones (it's an assignment from school).
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Ivory" FontSize="12" Background="Red" Height="45" Width="162" TextWrapping="Wrap" TextAlignment="Center" Padding="0,10,0,0" Opacity="0.5" Canvas.Top="258" Canvas.Left="275">
Boekhoudkundig inzicht
<TextBlock.RenderTransform>
<RotateTransform Angle="90" />
</TextBlock.RenderTransform>
<TextBlock.Effect>
<DropShadowEffect BlurRadius="15" Direction="60" ShadowDepth="3" />
</TextBlock.Effect>
</TextBlock>
<Rectangle Height="3" Width="45" Fill="Black" Canvas.Top="284" Canvas.Left="275" />
<Rectangle Height="80" Width="45" Fill="Gray" Opacity="0.5" Canvas.Top="229" Canvas.Left="275" />
The full XAML code can be found at pastebin
Related
I have two buttons on either side of a Label.
If either of these Buttons get removed, I want the Label to stay centered in a fixed position.
Is there any way to lock the position of this Label?
<DockPanel LastChildFill="True">
<DockPanel DockPanel.Dock="Top" Margin="4,8,4,8" LastChildFill="True">
<Button Name="SearchBackButton" Style="{DynamicResourceInfoButtonStyle}" Content="{StaticResource SearchBackButton}"
VerticalAlignment="Center" HorizontalAlignment="Left" Margin="4,0,0,0" BorderBrush="Transparent" Background="Transparent" DockPanel.Dock="Left" Click="SearchBackButton_Click" />
<Label HorizontalAlignment="Center" FontFamily="HelveticaNeue" FontSize="14" FontStyle="Normal" FontWeight="SemiBold" Foreground="#273238" Name="SuggestedTemplatesText" Content="{x:Static res:UIStrings.SuggestedTemplates}"/>
<Button Name="info_icon" Style="{DynamicResource InfoButtonStyle}" Click="InfoButton_Click"
VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,4,0" BorderBrush="Transparent" Background="Transparent" DockPanel.Dock="Right"/>
</DockPanel>
</DockPanel> <!-- Added by edit -->
This is the code for the Label and the two Buttons.
I am New WPF. I have PopupControl below is XAML for that:-
<Popup Name="PopupRemark" AllowsTransparency="True" Placement="Left" HorizontalOffset="45" VerticalOffset="-22"
PlacementTarget="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ToggleButton}}"
IsOpen="{Binding IsChecked, ElementName=btnInfo}" StaysOpen="False" >
<Canvas Width="230" Height="200" Background="Transparent" >
<Path x:Name="Container" Canvas.Left="0" Canvas.Top="0" Fill="#f2f6f7" Stroke="#A9A9A9"
Data="M 230,40 L220,50 220,90 0,90 0,0 220,0 220,30 230,40">
<Path.Effect>
<DropShadowEffect BlurRadius="18" Color="Black" Opacity="0.4"/>
</Path.Effect>
</Path>
<Label Grid.Row="0" FontSize="13" FontWeight="Bold" FontFamily="Roboto" Content="Remark" HorizontalAlignment="Left" Margin="0" VerticalAlignment="Center"/>
<TextBlock Canvas.Left="5" Canvas.Top="25" Width="210" Text="{Binding Remark}" Foreground="#2c3e50" FontFamily="Roboto" FontSize="11" TextWrapping="Wrapwithoverflow" />
</Canvas>
</Popup>
Issue is, I want to set auto height & width for canvas or popup control so my popup will size as per content into it.I googled and knew that canvas should have fix height or width but is there any solution(Workaround) to make popup auto sizable.or how can add scroller into popup. It will be greatly appreciable
Thanks in advance
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'm writing a UWP app and have several areas where searches are performed and results are rendered in a ListView where the ItemTemplate is defined inside a DataTemplate. Nothing fancy is going on here - just returns a list of items in a single "column", if you will.
There are three supported screen states (or widths), 320, 640, and 1024. I'd like to render these search results in two "columns" when the screen state is 640 or 1024 (wide states).
I'd like to use adaptive triggers for this task, but I'm at a loss of how to do this intelligently. There are examples of creating different views for each device family, but they seem too dependent on checking the device family. Best practices dictate using screen width thresholds instead. Either way, it seems this could easily be accomplished using adaptive triggers.
Any insight or examples of where this is done would be appreciated. The code is included to provide more context and to act as my starting point.
<Page.Resources>
<ResourceDictionary>
<Style x:Key="TextBlockStyle" TargetType="TextBlock" BasedOn="{StaticResource LargeTextBlockStyle}">
<Setter Property="Foreground" Value="{StaticResource TitleBrush}" />
</Style>
<DataTemplate x:Key="SearchResult">
<StackPanel Width="{Binding ActualWidth, ElementName=Parent}">
<Border Background="Gray" MinWidth="235">
<Grid Height="155">
<Image Source="{Binding SearchResultImage}"
Style="{StaticResource ImageStyle}" />
<Rectangle Fill="{StaticResource BackgroundBrush}" />
<StackPanel Margin="10,10,15,10" VerticalAlignment="Center">
<TextBlock Text="{Binding SearchResultName}"
Style="{StaticResource TextBlockStyle}"
VerticalAlignment="Center" />
</StackPanel>
</Grid>
</Border>
<Button Style="{StaticResource ButtonStyle}"
Command="{Binding ViewRecipeCommand, Source={StaticResource Locator}}"
CommandParameter="{Binding}">
<StackPanel Margin="0" Orientation="Horizontal" HorizontalAlignment="Center">
<SymbolIcon Symbol="Calendar" Margin="0,0,10,0" />
<TextBlock x:Uid="ViewRecipeCommandTextBlock"
Text="View Recipe"
Style="{StaticResource TextBlockStyle}" />
</StackPanel>
</Button>
</StackPanel>
</DataTemplate>
</ResourceDictionary>
</Page.Resources>
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel x:Name="HeaderStackPanel" Grid.Row="0" Margin="10">
<TextBlock x:Uid="RecipesTitle" Text="All Recipes"
Style="{StaticResource TextBlockStyle}"
Margin="0,0,0,10" />
</StackPanel>
<ListView x:Name="ResultsListView" Grid.Row="2"
ItemsSource="{Binding AllRecipes}"
ItemTemplate="{StaticResource SearchResult}" />
</Grid>
What I'd do to use a GridView instead a ListView, and change the GridView's ItemsPanel based on the width changes.
By using a GridView with an item width as wide as the screen size (320) you can get it to behave like a ListView, and if the GridView get's wider the content will automatically produce two columns for you. The only thing not to forget is to change the default scrolling direction of the ItemsPanel from horizontal to vertical.
I am working with TagVisualization, which displays an ellipse around the tag with name. I want to put 2 round buttons on the circumference (at well defined points) on the ellipse so that clicking them will result in change of some label text. I am unable to do this because I am unable to add s:Contacts.ContactDown property to the smaller ellipse.
Below is the XAML:
<s:TagVisualization x:Class="ControlsBox.TagVisual"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:s="http://schemas.microsoft.com/surface/2008"
Loaded="TagVisual_Loaded">
<Canvas>
<Ellipse Width="300" Height="300" Stroke="White" StrokeThickness="8" Opacity="0.7">
<Ellipse.Effect>
<BlurEffect Radius="12" />
</Ellipse.Effect>
</Ellipse>
<Ellipse Height="296" Width="296" Stroke="AntiqueWhite" StrokeThickness="4" >
<Ellipse.Effect>
<BlurEffect Radius="4"/>
</Ellipse.Effect>
</Ellipse>
<Label Content="John's Phone" HorizontalContentAlignment="Center" Padding="0,250,0,0" VerticalContentAlignment="Bottom" IsHitTestVisible="false">
<Label.Effect>
<DropShadowEffect BlurRadius="9" ShadowDepth="0" Color="Aqua"/>
</Label.Effect>
</Label>
<Ellipse Height="40" Width="40" Stroke="White" StrokeThickness="4" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,70,0,0" Fill="Black"
s:Contacts.ContactDown="UNABLE_TO_ADD" />
</Canvas>
After doing bit of googling, it appeared that using Expression Blend to create buttons with a style is an easier option.