I am looking at the shapes available in Blend Expression 4 for my WP7 app I am making. I am a bit confused though how to add text to a shape.
How do I add text to a shape?
Shapes in Blend for WP7 are simply ... Shapes.
All Expression Shapes inherits from Path, that inherit from System.Windows.Shapes.Shape. Shape is a base class for creating graphics. It supports only very basics properties such as fill, stroke, transform, ... you can not add text inside a shape because it's a pure-graphical object.
Hopefully for you, because they derive from UIElement, shape objects can be used inside panels and most WP controls. The Canvas panel is a particularly good choice for creating complex drawings because it supports absolute positioning of its child objects.
So, two examples can be
<Grid>
<es:RegularPolygon Fill="#FFF4F4F5" Height="100" InnerRadius="1" PointCount="6" Stretch="Fill" Stroke="Black" Width="100" />
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="Hello" Foreground="black"/>
</Grid>
or
<Canvas Height="200" Width="200">
<es:RegularPolygon Canvas.Left="50" Canvas.Top="50" Fill="#FFF4F4F5" Height="100" InnerRadius="1" PointCount="6" Stretch="Fill" Stroke="Black" Width="100" />
<TextBlock Canvas.Left="75" Canvas.Top="85" VerticalAlignment="Center" HorizontalAlignment="Center" Text="Hello" Foreground="black"/>
</Canvas>
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 don't know how to cut center of element (do center of element clear [sorry for my english]). I think to use opacity mask but i can't create this. I need create like this
<Rectangle Fill="#FFFF0000" Height="100" Width="100" />
<Rectangle Fill="#FF00FF00" Height="100" Width="100">
<Rectangle.OpacityMask>
<ImageBrush Stretch="Fill" ImageSource="mask.png"/>
</Rectangle.OpacityMask>
</Rectangle>
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 am developing the mapping functionality of our WP7 application. currently the pushpins appear as a circle graphic.
I am trying to create functionality to allow the user to be able to change the size of the circle of the pushpin, by sliding a bar. The idea being that the user can change the size of the pushpin anywhere between two sizes.
Therefore I don't want to create 2 or 3 pre-defined pushpin templates in XAML, and simply swap between them - I want to be able to modify an attribute of the template (specifically the height and width of the ellipse) in real time as the user slides a bar, or holds down on the page, or whatever.
However, I have been struggling to do this.
Is it possible to edit an attribute of an existing template? I have looked into creating a template in real time but this does not appear to be the solution, either.
Depending on the customer, the amount of pushpins that will appear on the page could vary by quite an amount. Also, our customers are outdoor types, and many struggle with smaller icons, whereas others don't. Hence my desire for this functionality.
Please find the XAML below, I simply wish to alter the size of the ellipse at run time. Thanks in advance for any help.
<ControlTemplate x:Key="PushpinControlTemplate1" TargetType="my:Pushpin">
<Grid x:Name="ContentGrid" Width="50" Height="50" >
<StackPanel Orientation="Vertical" >
<Grid MinHeight="31" MinWidth="29" Margin="0">
<Ellipse Fill="#FFFF7F00"
Margin="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="50"
Height="50"
Stroke="White"
StrokeThickness="3"/>
<ContentPresenter HorizontalAlignment="Center"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="4"/>
</Grid>
</StackPanel>
</Grid>
</ControlTemplate>
Bind a Height property to the ViewModel's propetry.
<Ellipse
Width="50"
Height="{Binding ItemHeight}"/>
And change the property, when user slides the bar.
private DataTemplate CreateDataTemplate()
{
string xaml =
#"<DataTemplate
xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation""
xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml"">
<Grid>
<Rectangle Fill=""LightGreen"" Height=""50"" Width=""250"" />
<TextBlock Text='{Binding}' FontSize='40' />
</Grid>
</DataTemplate>";
DataTemplate dt = (DataTemplate)XamlReader.Load(xaml);
return dt;
}
you can refer above code...
Click
.................................................................
binding your property