I have a TextBlock that I want to display vertically in a user control that is 30px wide. The TextBlock control has been rotated 90° using a RenderTransform.
The rotation seems to occur fine when I combine it with a 30px translation but the actual content of the TextBlock is truncated at what appears to be 30px.
It seems like the Text is being rendered at the 30px width of the parent and then transformed.
<UserControl x:Class="Xyz.Controls.FooControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="300" d:DesignWidth="30">
<Grid x:Name="LayoutRoot">
<Grid Name="barGrid" Background="#BFFFFFFF">
<Ellipse Width="30" Height="30" Fill="Red" HorizontalAlignment="Center" VerticalAlignment="Top" />
<TextBlock Name="barText" Text="88.8°"
Width="50"
Height="30"
Foreground="#FF3535C4">
<TextBlock.RenderTransform>
<CompositeTransform Rotation="90" TranslateX="30"/>
</TextBlock.RenderTransform>
</TextBlock>
</Grid>
</Grid>
</UserControl>
In this screenshot from Visual Studio the expected text is only showing 29px.
The same issue appears in Expression Blend and the Emulator.
I've figured out one way to get the intended layout but it seems like a bit of a hack.
By setting a negative left margin on the TextBlock (-20px) equal to the difference of the TextBox width (50px) and the parents width (30px) the full text is displayed vertically.
E.g.
<TextBlock Name="barText" Text="88.8°"
Width="50"
Height="30"
Foreground="#FF3535C4"
Margin="0,0,-20,0">
<TextBlock.RenderTransform>
<CompositeTransform Rotation="90" TranslateX="30"/>
</TextBlock.RenderTransform>
</TextBlock>
Related
I need to design a form with rounded corners. I have added a border item so I can handle the radius and get the intended result. It gets harder as I want to add a rectangle on the left side of the border item because I cannot get these rounded corners visible anymore. The point then is to add some text in the rectangle shape.
Here is my code :
<Window x:Class="WinPE_UI.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WinPE_UI"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800" AllowsTransparency="True" WindowStyle="None"
Foreground="{x:Null}" Background="{x:Null}">
<Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Center" Height="450"
VerticalAlignment="Center" Width="800" Background="White" CornerRadius="15"
Margin="1.375,-1.042,-1.375,1.042">
<Grid HorizontalAlignment="Left" Height="449" Margin="0,-1,-1,0" VerticalAlignment="Top"
Width="799">
<Rectangle Fill="#FFB41313" HorizontalAlignment="Left" Height="449" VerticalAlignment="Top"
Width="105.625"/>
</Grid>
</Border>
</Window>
Do any of you have an idea how to keep the rounded corners with Visual Studio?
Thank you!
I found the solution eventually. For those who might be interested, I have drawn a grid on which I applied two borders item sideways.
I tried to add a textbox and textblock to register page and in the preview its looks like that:
enter image description here
But when I run the project I see only the background without the textbox or the textblocks.
I tried to change to order or anything but without the background its just white blank page so the background does not hidding the text.
Thanks for helping.
The code:
<Page
x:Class="App2.RegisterPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Name="g1">
<Grid.Background>
<ImageBrush ImageSource="/IMAGES/Reg.png" Stretch="Fill"/>
</Grid.Background>
<TextBlock Margin="719,291,404,588" FontSize="105" FontFamily="Gisha" FontWeight="ExtraBold" Text="הרשמה"/>
<TextBox FontSize="50" Name="age" Text="גיל" Height="100" Margin="802,419,330,481" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<TextBox FontSize="50" Name="location" Text="מקום מגורים" Height="100" Margin="802,519,330,381"/>
<TextBox FontSize="50" Name="username" Text="שם משתמש" Height="100" Margin="802,619,330,281" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Grid>
I believe your TextBox's height and/or width is interfering with the xaml app's height and/or width
For Example..
My xaml app's borders(width, height) were 15 and 19, and the TextBox's borders(width, height) were 16, 20 -- That would interfere with app's borders, making the TextBox invisible, or, in simple terms, textBox1.Visible = false;
Just either downsize your TextBox, or up-size your xaml app.
Happy to help :)
Right now I have a ScrollViewer control in a Windows Store Application which surrounds an Image element. I am trying to make a pixel art editor but when the ScrollViewer is zoomed in the Image's contents are interpolated. Is there currently any way to force the image to be scaled in nearest neighbor mode?
EDIT: I decided I should put some code to clarify what I'm trying to do, so here it is:
<ScrollViewer
x:Name="Container"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ZoomMode="Enabled"
MinZoomFactor="0.1"
MaxZoomFactor="100"
HorizontalScrollMode="Enabled"
HorizontalScrollBarVisibility="Auto"
VerticalScrollMode="Enabled"
VerticalScrollBarVisibility="Auto"
ViewChanged="OnContainerViewChanged">
<Border
x:Name="ImageBorder"
Width="32"
Height="32"
BorderBrush="White"
BorderThickness="4">
<Grid>
<Image
x:Name="RenderedImage"/>
<Image
x:Name="EditPreview"/>
<Canvas
x:Name="GridContainer"
Visibility="Collapsed"/>
<Rectangle
x:Name="InputCapturer"
Fill="Transparent"
PointerPressed="OnPointerPressed"
PointerMoved="OnPointerMoved"
PointerReleased="OnPointerReleased"
PointerExited="OnPointerLeave"/>
</Grid>
</Border>
</ScrollViewer>
I am using the above given popup in my windows phone 8 application. My issue is for the black color list item, it is not possible to differentiate the item from other items. So my question is how i can put a rounded white border to this particular black list item.
Here is the template what i am using in my application.
<DataTemplate x:Key="ColorListTemplate">
<Grid Height="70" Margin="0,0,0,5" toolkit:TiltEffect.IsTiltEnabled="True">
<StackPanel Orientation="Horizontal">
<Ellipse Height="52" Width="52" Fill="{Binding SelectedColor}"/>
<TextBlock Text="{Binding ColorName}" Margin="32,0" FontSize="34" Style="{StaticResource NormalText}"/>
<CheckBox IsChecked="{Binding CheckedStatus}" Style="{StaticResource CheckBoxStyle}" IsHitTestVisible="False"/>
</StackPanel>
</Grid>
</DataTemplate>
Anyone please help me to design my requirement.
You could set a colored Stroke on the Ellipse elements to make it stand out on the black background.
Example:
<Ellipse Height="52" Width="52" Fill="{Binding SelectedColor}" Stroke="White" StrokeThickness="1"/>
I followed this example to display my usercontrol inside Coding4Fun MessagePrompt.
http://windowsphonegeek.com/articles/Creating-a-Windows-Phone-7-Trial-Application-Adding-Buy-Now-Functionality
When the Home icon at the bottom of the page is clicked I open MessagePromt which has my UserControl with two buttons as shown in image below.
But for some reason there appears this light white border, I am unable to determine from where it is coming.
Note: I have set border Transparent and 0 thickness for my usercontorl and all controls inside it.
I just want to show the blue panel and no white border and it's width is 300 as what it is seen.
Does any one has any idea?
I got help from "Eric Fleck - Microsoft" on apphub forums. Here's his solution:
<phone:PhoneApplicationPage
...
xmlns:c4f="clr-namespace:Coding4Fun.Phone.Controls;assembly=Coding4Fun.Phone.Controls">
<phone:PhoneApplicationPage.Resources>
<ControlTemplate x:Key="MsgPropmtNoBorder" TargetType="c4f:MessagePrompt">
<Grid VerticalAlignment="Stretch">
<Rectangle Fill="{StaticResource TransparentBrush}" />
<Border VerticalAlignment="Top"
Margin="10"
Background="{TemplateBinding Background}"
BorderThickness="0"
BorderBrush="{StaticResource PhoneForegroundBrush}">
<StackPanel Margin="10">
<TextBlock
Text="{TemplateBinding Title}"
Margin="0,-10,-25,10"
FontSize="30"
TextWrapping="Wrap" FontFamily="Segoe WP Light" />
<ContentPresenter Content="{TemplateBinding Body}" />
<StackPanel
Margin="0,10,0,0"
Name="actionButtonArea"
Orientation="Horizontal"
HorizontalAlignment="Center" />
</StackPanel>
</Border>
</Grid>
</ControlTemplate>
</phone:PhoneApplicationPage.Resources>
MessagePrompt prompt = new MessagePrompt();
prompt.Body = new WPUC();
prompt.ActionPopUpButtons.Clear();
prompt.Overlay = new SolidColorBrush(Color.FromArgb(155, 41, 41, 41));
prompt.Template = (ControlTemplate)this.Resources["MsgPropmtNoBorder"];
prompt.Show();
Here's the resultant popup:
I played a bit with the MessagePrompt control, it couldn't found any way to disable or hide the border. It's a shadow kind of effect in MessagePrompt control to provide a popup like appearance.
However, Eventhough you cannot remove it, you can reduce it's effect by setting the Width property of the MessagePrompt equal to your actual blue UserControl ( 300 in this case).