Animating effect properties that are inside other effects using Windows.UI.Composition - c#

I'm currently trying to animate Lights, that are inside the Source property of a CompositeEffect inside a BlendEffect using Windows.UI.Composition. This is my code:
var graphicsEffect = new BlendEffect
{
Mode = BlendEffectMode.Multiply,
Background = new CompositeEffect()
{
Name = "comp",
Mode = Microsoft.Graphics.Canvas.CanvasComposite.Add,
Sources =
{
new PointDiffuseEffect()
{
Name = "Light1",
DiffuseAmount = 1f,
},
new PointDiffuseEffect()
{
Name = "Light2",
DiffuseAmount = 1f,
},
},
},
Foreground = new GaussianBlurEffect()
{
Name = "Blur",
Source = new CompositionEffectSourceParameter("Backdrop"),
BlurAmount = 12f,
BorderMode = EffectBorderMode.Hard,
}
};
The issue is that when I try to animate the position or color of those lights, I'm told that "Animate property refers to an effect not in the graph". Is this even possible? If not, what kind of workaround would there be? I've tried calling Light1.Lightposition, comp.Light1.Lightposition, and comp.Sources.Light1.Lightposition, but none of those work.

Please check your reply in your MSDN thread:
https://social.msdn.microsoft.com/Forums/windowsapps/en-US/65a1f1a0-8c8c-414e-9734-ec5f407b3c6e/uwpanimating-effect-properties-that-are-inside-other-effects-using-windowsuicomposition?forum=wpdevelop.
Thanks.

Related

How to bind Gradient color in collection view

I have to bind gradient colors in a collection view in a grid.
i have tried with xmal.cs side but it doesnot working.
foreach(var item in abc)
{
if ((item.index % 2) == 0)
{
GradientStopCollection gradientStops = new GradientStopCollection();
gradientStops.Add(new GradientStop() { Color = Color.FromHex("#840CA3"), Offset = (float)0.1 });
gradientStops.Add(new GradientStop() { Color = Color.FromHex("#F4B6BF"), Offset = (float)1.0 });
LinearGradientBrush linearGradientBrush = new LinearGradientBrush()
{
EndPoint = new Point(0, 1),
GradientStops = gradientStops
};
item.BackgroundColor = linearGradientBrush;
}
else
{
GradientStopCollection gradientStops = new GradientStopCollection();
gradientStops.Add(new GradientStop() { Color = Color.FromHex("#A30C42"), Offset = (float)0.1 });
gradientStops.Add(new GradientStop() { Color = Color.FromHex("#F4B6BF"), Offset = (float)1.0 });
LinearGradientBrush linearGradientBrush = new LinearGradientBrush()
{
EndPoint = new Point(0, 1),
GradientStops = gradientStops
};
item.BackgroundColor = linearGradientBrush;
}
}
MycollectionView.itemsource = abc;
Quick answer:
You need Background, not Background Color.
Actually, what you need to do is:
Avoid this terrible design. You need to use binding, and instead of adding VisualElements, you need to be using DataTriggers, Styles and ItemTemplates.
You manipulate the data of your models. You should not iterate and assign individualy the color of your visual elements.
Spend few days to learn how to design your app properly, and it will save you years of working on problems.

How to disable animations on Highcharts Dotnet C# MVC?

So I have begun using Dotnet.Highcharts in Visual Studio with C# and MVC,
Its quite different from its javascript counterpart, I need to use ghostjs to take a picture from my web page to send as a report, as many must know, this means that animations interfere with this working properly as bars show up to half of the height they should be.
I'm using the recommended coding from Dotnet.highcharts which mostly uses Razor to configure the chart.
I have tried disabling animations in all these places:
PlotOptions = new PlotOptions
{
Column = new PlotOptionsColumn
{
PointPadding = 0.2,
BorderWidth = 0,
Animation = new Animation() { Enabled = false, Duration = 0 }
},
Series = new PlotOptionsSeries
{
Animation = new Animation() { Enabled = false, Duration = 0}
}
},
chartOptions.Drilldown.Animation = new Animation() { Enabled = false, Duration = 0};
chartOptions.Chart.Animation.Enabled = false;
and still the chart keeps animating, I just don't know what is going on
here is my full Razor code for the chart
var chartOptions = new Highcharts
{
Title = new Title { Text = "Transactions" },
Subtitle = new Subtitle { Text = "December" },
XAxis = new List<XAxis>
{
new XAxis
{
Categories = ViewBag.ListCategories
}
},
YAxis = new List<YAxis>
{
new YAxis
{
Min = 0,
Title = new YAxisTitle
{
Text = "Tx"
}
}
},
Tooltip = new Tooltip
{
HeaderFormat = "<span style='font-size:10px'>{point.key}</span><table style='font-size:12px'>",
PointFormat = "<tr><td style='color:{series.color};padding:0'>{series.name}: </td><td style='padding:0'><b>{point.y:.0f}</b></td></tr>",
FooterFormat = "</table>",
Shared = true,
UseHTML = true
},
PlotOptions = new PlotOptions
{
Column = new PlotOptionsColumn
{
PointPadding = 0.2,
BorderWidth = 0,
Animation = new Animation() { Enabled = false, Duration = 0 }
},
Series = new PlotOptionsSeries
{
Animation = new Animation() { Enabled = false, Duration = 0}
}
},
Series = new List<Series>
{
new ColumnSeries
{
Name = "TX",
Data = ViewData["DataTX"] as List<ColumnSeriesData>
}
}
};
chartOptions.ID = "chart";
chartOptions.Drilldown.Animation = new Animation() { Enabled = false, Duration = 0};
chartOptions.Chart.Animation.Enabled = false;
var renderer = new HighchartsRenderer(chartOptions);
This one worked for me. Had to play with it a while, seems there's no clear documentation.
DotNet.Highcharts.Highcharts chart = new DotNet.Highcharts.Highcharts("chart")
.InitChart(new Chart { DefaultSeriesType = ChartTypes.Areaspline})
.SetTitle(new Title
{
Text = "myLabel",
X = -20
})
.SetSeries(new[]
{
new Series { Name = "MyUsers", Data = new Data(myData), PlotOptionsSeries=new PlotOptionsSeries(){Animation=new Animation(false)} }
});
I found a way to disable the animation inside highcharts.js (From another question for the js version)
showCheckbox: !1,
animation: { duration: 1E3 }
, events: {},
I changed 1E3 to 0 and it worked, however, this is not the optimal solution, there must be a way to achieve this the right way. The whole point of the highcharts dll for visual studio is the ability to use highcharts without touching javascript
For now, I won't accept my own answer as the answer

Adding a ListView on top of MapView in Xamarin Android using C# (Not Xml)

What I'm trying to do is writing the Xamarin Android code for the attached image (Which is Xamarin iOS)
As we can see in the attached Image, we have a UITableView with floor numbers (1, 2 and 3).
How can I add a ListView in Android using C# (Not XML) to have the same result?
Here's a code snippet of the code I'm using.
But the problem is that my ListView is always under the SearchBox which is not what I want. I want the ListView to be at the bottom of my screen.
private void CreateLayout()
{
// Create a new vertical layout for the app
var layout = new LinearLayout(this) { Orientation = Orientation.Vertical };
// Search Bar
_mySearchBox = new AutoCompleteTextView(this) { Hint = "Search rooms or people..." };
layout.AddView(_mySearchBox);
//Auto Complete Drop Down List View
_searchListView = new ListView(this);
layout.AddView(_searchListView);
// Progress bar
_myProgressBar = new ProgressBar(this) { Indeterminate = true, Visibility = ViewStates.Gone };
layout.AddView(_myProgressBar);
// Floors List View
_floorsTableView = new ListView(this);
_floorsTableView.LayoutParameters = new ViewGroup.LayoutParams(100, 150);
_floorsTableView.TextAlignment = TextAlignment.Center;
var adap = new ArrayAdapter(this, Resource.Layout.SimpleSpinnerItem, new List<string>() { "1", "2", "3" });
_floorsTableView.Adapter = adap;
_floorsTableView.Visibility = ViewStates.Visible;
layout.AddView(_floorsTableView);
// Add a map view to the layout
_myMapView = new MapView(this);
layout.AddView(_myMapView);
// Show the layout in the app
SetContentView(layout);
}
I suggest you switch to a RelativeLayout instead of using a LinearLayout to host your views. LinearLayout inherently wants to position stuff according to its orientation, while RelativeLayout gives you more freedom and power to arrange views.
Also keep in mind that the order you add views to your host container matters. So in your case I would add the ListView last. This way you will ensure that the list draws on top of anything else.
Also you need to fully specify LayoutParams for each view!
var root = new RelativeLayout(this);
_mySearchBox = new AutoCompleteTextView(this) { Hint = "Search rooms or people..." };
_myMapView = new MapView(this)
{
Id = View.GenerateViewId()
};
_floorsTableView = new ListView(this)
{
Id = View.GenerateViewId()
};
var searchBoxParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.WrapContent);
searchBoxParams.AddRule(LayoutRules.AlignParentTop);
var mapParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.MatchParent);
var listParams = new RelativeLayout.LayoutParams(100, 150);
listParams.AddRule(LayoutRules.AlignParentStart);
listParams.AddRule(LayoutRules.AlignParentBottom);
listParams.SetMargins(16, 0, 0, 16);
root.AddView(_myMapView, mapParams);
root.AddView(_mySearchBox, searchBoxParams);
root.AddView(_floorsTableView, listParams);
SetContentView(root, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.MatchParent));
You will also want to convert the dimensions to px from dp:
private int DpToPx(int dp)
{
return (int)TypedValue.ApplyDimension(ComplexUnitType.Dip, dp, Resources.DisplayMetrics);
}
This way your dimensions will scale according to display density.
You should use RelativeLayout to put an object over another object, then use RelativeLayout.LayoutParams to specify where you want it. So you need:
var layout = new RelativeLayout(this);
And then using LayoutRules.AlignParentBottom and LayoutRules.AlignParentLeft:
// Floors List View
_floorsTableView = new ListView(this);
// Create parameters for the listview
RelativeLayout.LayoutParams parameters = new RelativeLayout.LayoutParams(100, 150);
parameters.AddRule(LayoutRules.AlignParentBottom);
parameters.AddRule(LayoutRules.AlignParentLeft);
_floorsTableView.TextAlignment = TextAlignment.Center;
var adap = new ArrayAdapter(this, Resource.Layout.SimpleSpinnerItem, new List<string>() { "1", "2", "3" });
_floorsTableView.Adapter = adap;
_floorsTableView.Visibility = ViewStates.Visible;
// Add the listview to the layout with parameters specified
layout.AddView(_floorsTableView, parameters);
I didn't test it so you may have to play with width and height layout parameters or such.

How to change Font Name from TextFrame in adobe illustrator?

I'm accessing a ai file from wpf Application and it runs and adds a text just fine
I need to change the font but I coudln't find any intuitive way to do so nor finding resources to help me out
any directions are welcome:
Illustrator.Application app = new Illustrator.Application();
//Illustrator.Document doc = app.Documents.Add(Illustrator.AiDocumentColorSpace.aiDocumentCMYKColor, 400, 240);
Illustrator.Document doc=app.Open(#"C:\folder\illu_1.ai");
Illustrator.Layer layer1 = doc.Layers.Add();
layer1.Name = "1";
Illustrator.TextFrame textFrame = layer1.TextFrames.Add();
object[] position = new object[2] { 0, 300 };
textFrame.Position = position;
textFrame.Contents = "Some text";
textFrame.Height = 100;
textFrame.Width = doc.Width;
textFrame.CreateOutline();
You can try this to change the font family of your TextFrame.
textFrame[FrameNumber].textRange.characterAttributes.textFont.name = app.textFonts.getByName("FontFamilyName");

Apply transformation on an image on C# for a Windows Phone application

I'm working on a mini-game where I need to make images go from their initial position to another using a translation transformation.
The problem is: I don't know how to proceed to apply the translation.
So here's the code used to generate my images.
Image myImage1 = new Image();
myImage1.Source = new BitmapImage(new Uri("/Images/image1.png", UriKind.Relative));
myImage1.Name = "image" + index++.ToString();
myImage1.Tap += myImage_Tap;
Canvas.SetLeft(image, 200);
Canvas.SetTop(image, 600);
gameArea.Children.Add(image);
Thanks for your time.
You have two choices to move your image around. The first is using a Canvas like your code shows, but you have to make sure your element is actually within a Canvas. Is your "gameArea" a Canvas? If it's not, your code won't work. The other option is to use Transforms.
var myImage1 = new Image
{
Source = new BitmapImage(new Uri("/Images/image1.png", UriKind.Relative)),
Name = "image" + index++.ToString(),
Tap += myImage_Tap,
RenderTransform = new TranslateTransform
{
X = 200,
Y = 600
}
};
gameArea.Children.Add(image);
Now gameArea can be any type of Panel and it will work.
Note that when using a Canvas, your Top and Left will be from the upper left corner of the Canvas. When using a Transform, your X and Y will be relative to where the element would have originally be drawn.
UPDATE -- Helper class to do simple animations using a Canvas
public sealed class ElementAnimator
{
private readonly UIElement _element;
public ElementAnimator(UIElement element)
{
if (null == element)
{
throw new ArgumentNullException("element", "Element can't be null.");
}
_element = element;
}
public void AnimateToPoint(Point point, int durationInMilliseconds = 300)
{
var duration = new Duration(TimeSpan.FromMilliseconds(durationInMilliseconds));
var easing = new BackEase
{
Amplitude = .3
};
var sb = new Storyboard
{
Duration = duration
};
var animateLeft = new DoubleAnimation
{
From = Canvas.GetLeft(_element),
To = point.X,
Duration = duration,
EasingFunction = easing,
};
var animateTop = new DoubleAnimation
{
From = Canvas.GetTop(_element),
To = point.Y,
Duration = duration,
EasingFunction = easing,
};
Storyboard.SetTargetProperty(animateLeft, "(Canvas.Left)");
Storyboard.SetTarget(animateLeft, _element);
Storyboard.SetTargetProperty(animateTop, "(Canvas.Top)");
Storyboard.SetTarget(animateTop, _element);
sb.Children.Add(animateLeft);
sb.Children.Add(animateTop);
sb.Begin();
}
}
So here's what I did with your code, I took just this part and made it a function:
public void AnimateToPoint(UIElement image, Point point, int durationInMilliseconds = 300)
{
var duration = new Duration(TimeSpan.FromMilliseconds(durationInMilliseconds));
var sb = new Storyboard
{
Duration = duration
};
var animateTop = new DoubleAnimation
{
From = Canvas.GetTop(image),
To = point.Y,
Duration = duration
};
Storyboard.SetTargetProperty(animateTop, new PropertyPath("Canvas.Top")); // You can see that I made some change here because I had an error with what you gave me
Storyboard.SetTarget(animateTop, image);
sb.Children.Add(animateTop);
sb.Begin();
}
And then I made the call with:
Point myPoint = new Point(leftpos, 300); // leftpos is a variable generated randomly
AnimateToPoint(myImage, myPoint);
So now there is still a single error, and it's in the instruction "sb.Begin;".
And it says: Cannot resolve TargetProperty Canvas.Top on specified object.
I reaylly don't know how to proceed.
Thanks for your previous answer!

Categories