How to position UserControl in the parent canvas - wpf

I want to place this UserControl at Canvas.Left="168", Canvas.Top="213".
However, the control appears at a corner. What should I do?
If I put the values at the point of usage for this class, the values are returned as NaN
In that case how can I get the correct Left and Top Values?
Usage:
<Canvas x:Name="DesignerCanvas"
ClipToBounds="True"
SnapsToDevicePixels="True">
<Gr:BareNode />
</Canvas>
UserControl:
<UserControl x:Class="DiagramDesigner.BareNode"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<ContentControl Width="50"
Height="50"
Padding="2"
Canvas.Left="168" Canvas.Top="213">
<Ellipse IsHitTestVisible="False" >
<Shape.Fill>
<RadialGradientBrush Center="0.2, 0.2" GradientOrigin="0.2, 0.2" RadiusX="0.8" RadiusY="0.8">
<GradientStop Color="LightBlue" Offset="0"/>
<GradientStop Color="Blue" Offset="0.9"/>
</RadialGradientBrush>
</Shape.Fill>
</Ellipse>
</ContentControl>
</Grid>
</UserControl>

I'm not sure if you tried this or not, but just from looking at the XAML it appears that you are trying to set the position of the user control inside the user control. That won't work. You need to put it where you use the user control
<Canvas x:Name="DesignerCanvas"
ClipToBounds="True"
SnapsToDevicePixels="True">
<Gr:BareNode Canvas.Left="168" Canvas.Top="213"/>
</Canvas>
Take the Canvas.Left="168" Canvas.Top="213" part out of the ContentControl declaration of inside the user control.

Related

Create semi-circle blur effect on a Grid

I want to develop a WindowsPhone 8 app with a home page like the fourth phone on this page. The one with a mountain.
You can see an image with two layers over it. My problem is that I don't know how to call that effect in English, and also, I don't know how to do it.
Maybe I will need to make three copies of my image: one untouched, a second one with, a blur effect? and a third one with a 'bigger' blur effect.
Or maybe, I have to add two Grids with some white background and with an opacity less than 100%.
How would you do it?
Your solution is just a good one, I would the samething, and I don't expect that application to be implementing something different, in détails I would do :
One Grid with High Blur on the background.
Another Grid with middle Blur on the front. I'll use an OpacityMask set to a RadialGradientBrush to create that ring effect just like in here : http://msdn.microsoft.com/en-us/library/bb979637(v=vs.95).aspx
And one lase Grid with no Blur in the Front of The previous Grid again with a OpacityMask also set to a RadialGradientBrush.
The three Grids will all have the same Background TileBrush, example :
The Result I've made :
Code :
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="The effect you asked, with :" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
<TextBlock Text="That's Clapton" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel1" Grid.Row="1" Margin="12,0,12,0">
<Grid.Background>
<ImageBrush ImageSource="Eric_Clapton_Blur3.jpg" Stretch="UniformToFill"/>
</Grid.Background>
</Grid>
<Grid x:Name="ContentPanel2" Grid.Row="1" Margin="12,0,12,0">
<Grid.OpacityMask>
<RadialGradientBrush Center="0.5,0.5">
<RadialGradientBrush.RelativeTransform>
<CompositeTransform CenterY="0.5" CenterX="0.5" TranslateX="0.4" ScaleX="1.4"/>
</RadialGradientBrush.RelativeTransform>
<!-- This gradient stop is partially transparent. -->
<GradientStop Color="#00000000" Offset="1" />
<!-- This gradient stop is partially transparent. -->
<GradientStop Color="#20000000" Offset="0.741" />
<!-- This gradient stop is fully opaque. -->
<GradientStop Color="#FF000000" Offset="0.728" />
</RadialGradientBrush>
</Grid.OpacityMask>
<Grid.Background>
<ImageBrush ImageSource="Eric_Clapton_Blur2.jpg" Stretch="UniformToFill"/>
</Grid.Background>
</Grid>
<Grid x:Name="ContentPanel3" Grid.Row="1" Margin="12,0,12,0">
<Grid.OpacityMask>
<RadialGradientBrush Center="0.5,0.5">
<RadialGradientBrush.RelativeTransform>
<CompositeTransform CenterY="0.5" CenterX="0.5" TranslateX="0.4" ScaleY="0.6"/>
</RadialGradientBrush.RelativeTransform>
<!-- This gradient stop is partially transparent. -->
<GradientStop Color="#00000000" Offset="1" />
<!-- This gradient stop is partially transparent. -->
<GradientStop Color="#20000000" Offset="0.741" />
<!-- This gradient stop is fully opaque. -->
<GradientStop Color="#FF000000" Offset="0.728" />
</RadialGradientBrush>
</Grid.OpacityMask>
<Grid.Background>
<ImageBrush ImageSource="Eric_Clapton.jpg" Stretch="UniformToFill"/>
</Grid.Background>
</Grid>
I know I didn't do it with perfection, and I used terrible naming for the Elements, It's just I've just woke up, and didn't even take my breakfast, hope that helps.

binding the background color of a gradient inside of a WPF listbox datatemplate

So I have a datatemplate and there is board in it, here is what I wan to do.
<Border Grid.Column="0" Grid.Row="4" Grid.ColumnSpan="5">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Transparent"/>
<GradientStop
Color="{Binding Condition, Converter={StaticResourc ConditionTypeToColorConveter}}" Offset="0.541"/>
</LinearGradientBrush>
</Border.Background>
</Border>
I can see the converter being called no problem. but the color it returns isn't displayed. Now if I do this
<Border Grid.Column="0"
Grid.Row="4" Grid.ColumnSpan="5"
Background="{Binding Condition, Converter={StaticResourc ConditionTypeToColorConveter}}">
It works just fine - of course - I don't want it to be all one color I need it to be a gradient.
Anyone have any idea what is wrong with this? it's making me batty...
This can't work because in the first example you bind a Color in the second a Brush. What type your converter returns? You named it 'ToColor' but it is working as a Brush for Background.

Inheriting values declared at UserControl instantiation

First off, I apologize if this question has been asked before. I've done a bit of Google searching but I'm not really sure what the correct keywords are to find what I'm looking for.
Basically my problem is simple to understand. I have a Silverlight project and on the MainPage.xaml I have declared a UserControl and given it a height and a width.
<Grid>
<control:AlarmButton Height="50" Width="50" />
</Grid>
Now within AlarmButton I have a button that has its own Control Template which is set up the way I want. It has a content presenter within it right now.
<UserControl
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"
x:Class="Alarms.AlarmButton">
<UserControl.Resources>
<ControlTemplate x:Key="StatusButton" >
<Viewbox Stretch="Fill">
<Grid>
<Path x:Name="Base" StrokeThickness="1.0" Stroke="#ff000000" StrokeMiterLimit="1.0" Fill="#ff666666" Data="F1 M 99.500,99.500 L 0.500,99.500 L 0.500,0.500 L 99.500,0.500 L 99.500,99.500 Z"/>
<Path x:Name="Interior" Opacity="0.5" StrokeThickness="1.0" Stroke="#ff191919" StrokeMiterLimit="1.0" Data="F1 M 97.500,97.500 L 2.500,97.500 L 2.500,2.500 L 97.500,2.500 L 97.500,97.500 Z">
<Path.Fill>
<LinearGradientBrush MappingMode="Absolute" StartPoint="2.500,2.499" EndPoint="97.500,97.499">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.00" Color="#3FFFFFFF"/>
<GradientStop Offset="0.151" Color="Transparent"/>
<GradientStop Offset="1.00" Color="#BFFFFFFF"/>
<GradientStop Color="#53FFFFFF" Offset="0.655"/>
</LinearGradientBrush.GradientStops>
<LinearGradientBrush.Transform>
<MatrixTransform Matrix="1.000,0.000,-0.000,-1.000,0.000,100.000" />
</LinearGradientBrush.Transform>
</LinearGradientBrush>
</Path.Fill>
</Path>
<Path x:Name="LargeShader" Opacity="0.1" Fill="#ffffffff" Data="F1 M 94.667,18.667 L 94.667,94.667 L 6.333,94.667 C 6.333,94.667 94.667,67.348 94.667,18.667 Z"/>
<Path x:Name="SmallShader" Opacity="0.1" Fill="#ffffffff" Data="F1 M 94.667,43.667 L 94.667,94.667 L 20.333,94.667 C 20.333,94.667 94.667,76.334 94.667,43.667 Z"/>
<ContentPresenter x:Name="contentPresenter" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Viewbox>
</ControlTemplate>
</UserControl.Resources>
<Grid >
<Button Template="{StaticResource StatusButton}" >
<TextBlock Text="this is a text box"
TextTrimming="WordEllipsis" />
</Button>
</Grid>
</UserControl>
Later on I'm going to bind the Text property to a DependencyProperty so I can use this button with multiple text. What I want to happen is if the text is too big it will ellipse it and not have the box change or the textblock overflow. I just need to bind the height and width of the TextBlock to some values to contain it.
My question is this; is it possible for the TextBlock to bind its height and width to the values as declared in the MainPage.xaml? Or is this more complicated than I imagine? Is there a better way to go about this?
EDIT
This might give a little more info on what I'm trying to accomplish. This is my "button" with RobSiklos' changes
I think the problem has something to do with the Viewbox, which is telling the TextBlock that it has as much room as it wants.
Probably removing the Viewbox will solve the issue (or at least take the ContentPresenter out of the Viewbox)
I'm not sure I completely understand. Are you trying to make the text ellipse because you don't want the text block to grow if the text is too big? If so, you could use a converter (in the binding statement of the Text property) to have the the converter return the full text value if the text is under a certain length, or have the converter show an ellipse if the text is over that value.
This ought to work:-
<Grid x:Name="LayoutGrid">
<Button Template="{StaticResource StatusButton}" >
<TextBlock Text="this is a text box" TextTrimming="WordEllipsis"
Width="{Binding Parent.Width, ElementName=LayoutRoot}"
Height="{Binding Parent.Height, ElementName=LayoutRoot}" />
</Button>
</Grid>
It assumes that a Width and Height will be specified. An alternative would be to be to use the SizeChanged event of the UserControl to assign values of Width and Height directly.

How to set the back ground color of grid-column in wpf?

I have a wpf mvvm application.
And have a GRID with multiple columns
whats best way to set the back ground color of grid-column in wpf?
dabble125's answer was perfect but to give you a sample and to mention a note that it is important where to place your rectangle see the code:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<!-- this is not a good place for text block.
the text block is beneath the rectangle
so it would not be seen -->
<!--<TextBlock Grid.Column="1" Text="Some Text"/>-->
<Rectangle Grid.Column="1" Grid.RowSpan="1000">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF83FF97" Offset="0" />
<GradientStop Color="White" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Grid.Column="1" Text="Some Text"/>
</Grid>
One way:
Create a rectangle and set its fill to the color of your choice.
Then set its Grid.RowSpan value to a large number or the number of rows you have.
Create a rectangle and set its fill to the color of your choice.
Only having :
<Rectangle
Grid.Column="1"
Fill="#e8ebf1" />
works for me.
The Grid.RowSpan of previous answers is actually useless, and the LinearGradientBrush demonstrated is over-complicated for what is asked.

Strange behavior on ShowDialog in WPF

I create separate Window, design it with XAML and when I invoke ShowDialog from main form it seems like my dialog (Window) blinks once and then shows itself. Is it a common behavior? I didn't notice that in while working with Windows Forms. I also ran application on another computer, and get the same thing. It bothers me, cause I was developing a simple game, and it's not the effect I would like users to experience.
It is not a complicated dialog, considering the design. It contains just label and button. Here is one sample:
<Window x:Class="A_Boggle.Info"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Info" Height="300" Width="670" AllowsTransparency="True" WindowStyle="None" Background="Transparent" BorderBrush="Transparent" Foreground="Transparent" ShowInTaskbar="False" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" Closing="Window_Closing">
<Grid>
<Border Background="Transparent" Visibility="{Binding Visibility}">
<Border BorderBrush="#FF7C4400" BorderThickness="4"
CornerRadius="10,0,10,0" VerticalAlignment="Center" HorizontalAlignment="Center" Height="177.5" Width="596.25">
<Border.Background>
<RadialGradientBrush Center="0.5,0.5" GradientOrigin="0.5,0.5" RadiusX="0.479" RadiusY="0.524">
<GradientStop Color="#FFF58611" Offset="0"/>
<GradientStop Color="#FFF58611" Offset="0.11798000335693359"/>
<GradientStop Color="#FFE9B231" Offset="1"/>
</RadialGradientBrush>
</Border.Background>
<Border.BitmapEffect>
<DropShadowBitmapEffect Color="Black" Opacity="0.5" Direction="270" ShadowDepth="0.7" />
</Border.BitmapEffect>
<Grid>
<Separator Height="20" Name="separator1" Margin="8.75,0,6.25,45" VerticalAlignment="Bottom" />
<Button Style="{DynamicResource OrangeButton}" Margin="406.25,0,6.25,6" Height="37.75" VerticalAlignment="Bottom" FontSize="16" Name="dialogButton" Click="dialogButton_Click"></Button>
<Label FontFamily="Resources/#French Grotesque" FontSize="20" Foreground="#FF7C4400" Margin="8.75,20,6.25,71.25" Name="messageLabel"></Label>
</Grid>
</Border>
</Border>
</Grid>
No. Blinking on ShowDialog is not a common behaviour. Could you first try with an empty Window:
new Window().ShowDialog();
in order to see if the problem persists?
Aside from the main topic, WPF/XAML might be not the proper technology for a complicated game due to performance reasons (although for a simple one must be OK).

Resources