I've applied a shadow effect on a simple TextBlock control, but I've a problem : the shadow is in front of the Textblock and I don't know how to put the shadow behind the TextBlock. Do you have the solution for this problem ?
There is the code that creates the DropShadow effect:
public void SetupSimpleTextShadow(TextBlock shadowTarget)
{
Visual hostVisual = ElementCompositionPreview.GetElementVisual(shadowTarget);
Compositor compositor = hostVisual.Compositor;
DropShadow dropShadow = compositor.CreateDropShadow();
dropShadow.Color = Color.FromArgb(255, 50, 50, 50);
dropShadow.BlurRadius = 7f;
dropShadow.Offset = new Vector3(5f, 5f, 0f);
dropShadow.Opacity = 0.9f;
dropShadow.Mask = shadowTarget.GetAlphaMask();
SpriteVisual shadowVisual = compositor.CreateSpriteVisual();
shadowVisual.Shadow = dropShadow;
ElementCompositionPreview.SetElementChildVisual(shadowTarget, shadowVisual);
ExpressionAnimation bindSizeAnimation = compositor.CreateExpressionAnimation("hostVisual.Size");
bindSizeAnimation.SetReferenceParameter("hostVisual", hostVisual);
shadowVisual.StartAnimation("Size", bindSizeAnimation);
}
Try use XPShadow.The sample link is https://github.com/brookshi/XPShadow.
Finding the XPShadow in Nuget and download it.
Writing the ref NameSpace :xmlns:xp="using:XP"
In the code that you want the control have shadow,you can use the control in xp:Shadow.
<xp:Shadow CornerRadius="2"
IsCached="True"
Z_Depth="2">
<Control/>
</xp:Shadow>
Related
I am trying to draw an ellipse using the Path control dynamically.
In my MainWindow():
EllipseGeometry ellipse = new EllipseGeometry(new Point(50, 50), 45, 20);
var path = new Path();
path.VerticalAlignment = VerticalAlignment.Top;
path.HorizontalAlignment = HorizontalAlignment.Left;
path.Fill = Brushes.Black;
path.Stroke = new SolidColorBrush(Colors.Green);
path.StrokeThickness = 2;
path.Data = ellipse;
but nothing shows up.
I realised that I need to "associate" the path object with my dialog box but I do not know how to do that. Is there a way to accomplish this via non-XAML methods since I will need to dynamically generate many different path objects?
All you are missing is basically that:
SamplePanel.Children.Add(path);
The above assumes that there is a Panel named SamplePanel in your window's XAML, e.g.
<Grid x:Name="SamplePanel" />
So I have this problem where I have this view structure:
Controller->View->ScrollView->mainview
and I have a button that's loaded in the mainview, but outside of scrollview's visible content. When I scroll up to see the button, the touch doesn't work, but if I place the button to load in the visible area it works.
I also tried with a simple imageview and setting a gesture recognizer (with user interaction enabled) and the problem is exactly the same.
This is where I define the button:
UIButton scrapbookbackground = new UIButton(new CGRect(SPACING, progresses_view.Frame.Y + progresses_view.Frame.Height + SPACING, View.Frame.Width - SPACING * 2, 90));
scrapbookbackground.BackgroundColor = UIColor.Clear.FromHex(0x4f80bc);
scrapbookbackground.Layer.CornerRadius = 10f;
scrapbookbackground.Layer.BorderWidth = 1f;
scrapbookbackground.Layer.BorderColor = UIColor.Blue.CGColor;
scrapbookbackground.ClipsToBounds = true;
scrapbookimg = UIImage.FromFile("Images/scrap_capa.png");
scrapbookbackground.SetBackgroundImage(scrapbookimg, UIControlState.Normal);
scrapbookbackground.TouchUpInside += (args, e) => {
Console.WriteLine("scrapbooktouch");
NavigationController.PushViewController(new ScrapBookPageViewController(), true);
};
mainview.Add(scrapbookbackground);
figured it out. was not setting contentsize of scrollview properly.
I am new for RenderTransform, I need to apply the below RenderTransform in code behind(C#)
<local:Container.RenderTransform>
<CompositeTransform x:Name="visualCoinatiner_transform" />
</local:Container.RenderTransform>
Any suggestion on this?
We can apply the RenderTransform in code behind like below code,
private CompositeTransform _compositeTransform;
_compositeTransform = new CompositeTransform();
this.RenderTransform = _compositeTransform;
yes, thank you for this answer. Just to build on it a little, flip a MediaPlayerElement both horizontally and vertically:
thisMPElement = Canvas.FindName("NameOfXAMLElement") as MediaPlayerElement;
var cp = new CompositeTransform()
{
ScaleX = -1,
ScaleY = -1
};
thisMPElement.RenderTransform = cp;
I have a WPF application that loads Pages in a templated NavigationWindow. I'd like to implement a slide transition when a new page is loaded and since the window can be resized the target values for the transform need to be determined programatically as far as I am aware.
I tried the following in the NavigationWindow code-behind but it has no effect when it fires. The PageContentContainerTransform is also being correctly located as determined from the debugger.
public void DoTransition()
{
double targetX = this.ActualWidth;
this.TransitionStoryboard.Stop();
this.TransitionStoryboard.Children.Clear();
IEasingFunction easing = new QuadraticEase() { EasingMode = EasingMode.EaseOut };
DoubleAnimation translateXAnim = new DoubleAnimation() {
To = targetX,
Duration = TimeSpan.FromMilliseconds(250),
EasingFunction = easing,
};
DependencyObject d = this.Template.FindName("pageContentContainerTransform", this) as DependencyObject;
Storyboard.SetTarget(translateXAnim, d);
Storyboard.SetTargetProperty(translateXAnim, new PropertyPath(TranslateTransform.XProperty));
this.TransitionStoryboard.Children.Add(translateXAnim);
this.TransitionStoryboard.Begin();
}
The Template is a ControlTemplate containing the following bit of XAML,
...
<ContentPresenter
Grid.Row="1"
x:Name="pageContentContainer"
MaxHeight="{StaticResource ContentWindowMaxHeight}"
MaxWidth="{StaticResource ContentWindowMaxWidth}"
RenderTransformOrigin="0.5,0.5">
<ContentPresenter.RenderTransform>
<TranslateTransform x:Name="pageContentContainerTransform" X="0" Y="0" />
</ContentPresenter.RenderTransform>
</ContentPresenter>
...
Why is there no effect?
Update
The animation works if you animate the element directly without wrapping in a Storyboard object. E.g.
public void DoTransition()
{
double targetX = this.ActualWidth;
this.TransitionStoryboard.Stop();
this.TransitionStoryboard.Children.Clear();
IEasingFunction easing = new QuadraticEase() { EasingMode = EasingMode.EaseOut };
DoubleAnimation translateXAnim = new DoubleAnimation() {
To = targetX,
Duration = TimeSpan.FromMilliseconds(250),
EasingFunction = easing,
};
TranslateTransform t = this.Template.FindName("pageContentContainerTransform", this) as TranslateTransform;
t.BeginAnimation(TranslateTransform.XProperty, translateXAnim);
}
However presumably you miss out on some nice control elements for the animations that the Storyboard object provides e.g. managing the animations (Stop, Start etc.). There appears to be possible arguments to .Begin() on the storyboard object that are pertinent to use within a Template, however calling with .Begin(this, this.Template) also does not do anything.
In the end a combination of factors got it to work. First, use Storyboard.SetTargetName rather than Storyboard.SetTarget. Secondly pass in the template context to the Begin() method. E.g.
public void DoTransition()
{
double targetX = this.ActualWidth;
this.TransitionStoryboard.Stop();
this.TransitionStoryboard.Children.Clear();
IEasingFunction easing = new QuadraticEase() { EasingMode = EasingMode.EaseOut };
DoubleAnimation translateXAnim = new DoubleAnimation() {
To = targetX,
Duration = TimeSpan.FromMilliseconds(250),
EasingFunction = easing,
};
// 1. Refer to the element by Name
Storyboard.SetTargetName(translateXAnim, "pageContentContainerTransform");
Storyboard.SetTargetProperty(translateXAnim, new PropertyPath(TranslateTransform.XProperty));
this.TransitionStoryboard.Children.Add(translateXAnim);
// 2. Pass in the template context here
this.TransitionStoryboard.Begin(this, this.Template);
}
I'm not clear why the SetTargetProperty does not work when you consider that FindName correctly identified the element within the template, but in any case the above methods works.
I have several boxes from type Windows.UI.Xaml.Controls.Control with different sizes. I wanna transform a few of them vertically. Like shown in the picture.
I'm struggling doing this.I'm sure that should not be very difficult but I don't get it...
Btw. I wanna do that in code behind not in XAML.
Many thanks for your help.
Cheers
Daniel
edit:
DoubleAnimation scaleAnimation = new DoubleAnimation();
scaleAnimation.From = startHeight;
scaleAnimation.To = this.ClientHeight * Percentage;
scaleAnimation.Duration = TimeSpan.FromMilliseconds(500);
scaleAnimation.EasingFunction = new QuarticEase() { EasingMode = EasingMode.EaseOut };
Storyboard storyScaleX = new Storyboard();
storyScaleX.Children.Add(scaleAnimation);
Storyboard.SetTarget(storyScaleX, slice);
scaleAnimation.EnableDependentAnimation = true;
Storyboard.SetTargetProperty(storyScaleX, "Height");
You can apply a TranslateTransform to the LayoutTransform or RenderTransform of the element (depending on what you need). e.g.
element.LayoutTransform = new TranslateTransform(0, 100)
If the effect you require depends on the height of the element, use the element's ActualHeight as the value to translate by.