I built an messagebar, with an animated text,
see the .gif from the animation.
Like you can see the text "fly's" in the foreground and hides the placeholder. But I need the placeholder in the foreground.
My first idea was to change the region of the animation from
doubleAnimation.To = tbInfo.ActualWidth *-1;
to
doubleAnimation.To = boLogo.ActualWidth;
but the result looks like this: version with other animation area.
How can I set the placeholder in the foreground, so that the animation "fly's" behind it?
My XAML-Code
<Canvas x:Name="canMain" HorizontalAlignment="Stretch" VerticalAlignment="Center">
<Border x:Name="boLogo" Height="40" Background="Gray" Canvas.Left="0" Canvas.Top="-20">
<Button Content="Placeholder" Width="90" />
</Border>
<TextBlock x:Name="tbInfo" Visibility="Hidden" FontSize="32" FontWeight="Bold" Padding="5" HorizontalAlignment="Stretch" VerticalAlignment="Center"></TextBlock>
</Canvas>
and the code to show the window
public void ShowWindow(string str)
{
tbInfo.Text = str;
this.Height = 39;
this.Width = SystemParameters.WorkArea.Width;
this.Left = SystemParameters.PrimaryScreenWidth - this.Width;
this.Show();
TextMarquee(20);
}
private void TextMarquee(int duration)
{
double height = canMain.ActualHeight - tbInfo.ActualHeight;
tbInfo.Margin = new Thickness(0, height / 2, 0, 0);
DoubleAnimation doubleAnimation = new DoubleAnimation();
doubleAnimation.From = canMain.ActualWidth;
doubleAnimation.To = tbInfo.ActualWidth * -1;
doubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
doubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(duration));
tbInfo.BeginAnimation(Canvas.LeftProperty, doubleAnimation);
tbInfo.Visibility = Visibility.Visible;
}
Use the Panel.ZIndex:
<Canvas x:Name="canMain" >
<Border x:Name="boLogo" Panel.ZIndex="2">
<Button Content="Placeholder" Width="90" />
</Border>
<TextBlock x:Name="tbInfo" Panel.ZIndex="1"></TextBlock>
</Canvas>
https://msdn.microsoft.com/de-de/library/system.windows.controls.panel.zindex%28v=vs.110%29.aspx
Try the Grid.ZIndex:
<Grid x:Name="canMain" >
<Border x:Name="boLogo" Grid.ZIndex="2">
<Button Content="Placeholder" />
</Border>
<TextBlock x:Name="tbInfo" Grid.ZIndex="1"/>
</Grid>
Being ZIndex = "2" the most visible layer.
Related
I've been struggling with this for some time now. The problem relates to adding a second legend canvas in a wpf chart. I'm referencing Jack Yu's book Practical WPF Charts and Graphics LineChartWithLegend.xaml file. In the xaml file, I added the new legend canvas named "legendCanvas2". I've changed the code behind to add a second instance of the legend in the AddChart() method. The problem is the second legend does not show inside chartCanvas. I suspect this issue has to do with multiple canvas containers inside chartCanvas but not sure. Any help with alternative ways I can display two legends inside chartCanvas would be appreciated.
XAML
<Window x:Class="LineCharts.LineChartWithLegend"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Line Chart with Legend" Height="400" Width="500">
<Grid Name="grid1" Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Name="column1" Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Name="row1" Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Margin="2" x:Name="tbTitle" Grid.Column="1" Grid.Row="0"
RenderTransformOrigin="0.5,0.5" FontSize="14" FontWeight="Bold"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch" TextAlignment="Center"
Text="Title"/>
<TextBlock Margin="2" x:Name="tbXLabel" Grid.Column="1" Grid.Row="2"
RenderTransformOrigin="0.5,0.5" TextAlignment="Center"
Text="X Axis"/>
<TextBlock Margin="2" Name="tbYLabel" Grid.Column="0" Grid.Row="1"
RenderTransformOrigin="0.5,0.5" TextAlignment="Center"
Text="Y Axis">
<TextBlock.LayoutTransform>
<RotateTransform Angle="-90"/>
</TextBlock.LayoutTransform>
</TextBlock>
<Grid Margin="0" x:Name ="chartGrid" Grid.Column="1" Grid.Row="1"
ClipToBounds="True" Background="Transparent" SizeChanged="chartGrid_SizeChanged" />
<Canvas Margin="2" Name="textCanvas" ClipToBounds="True" Grid.Column="1" Grid.Row="1">
<Canvas Name="chartCanvas" ClipToBounds="True">
<Canvas Name="legendCanvas" Background="Transparent" />
<Canvas Name="legendCanvas2" Background="Transparent" />
</Canvas>
</Canvas>
</Grid>
</Window>
Code-Behind
private void AddChart()
{
cs = new ChartStyleGridlines();
lg = new Legend();
lg2 = new Legend();
dc = new DataCollection();
ds = new DataSeries();
cs.ChartCanvas = chartCanvas;
cs.TextCanvas = textCanvas;
cs.Title = "Sine and Cosine Chart";
cs.Xmin = 0;
cs.Xmax = 7;
cs.Ymin = -1.5;
cs.Ymax = 1.5;
cs.YTick = 0.5;
cs.GridlinePattern = ChartStyleGridlines.GridlinePatternEnum.Dot;
cs.GridlineColor = Brushes.Black;
cs.AddChartStyle(tbTitle, tbXLabel, tbYLabel);
// Draw Sine curve:
ds.LineColor = Brushes.Blue;
ds.LineThickness = 1;
ds.SeriesName = "Sine";
for (int i = 0; i < 70; i++)
{
double x = i / 5.0;
double y = Math.Sin(x);
ds.LineSeries.Points.Add(new Point(x, y));
}
dc.DataList.Add(ds);
// Draw cosine curve:
ds = new DataSeries();
ds.LineColor = Brushes.Red;
ds.SeriesName = "Cosine";
ds.LinePattern = DataSeries.LinePatternEnum.DashDot;
ds.LineThickness = 2;
for (int i = 0; i < 70; i++)
{
double x = i / 5.0;
double y = Math.Cos(x);
ds.LineSeries.Points.Add(new Point(x, y));
}
dc.DataList.Add(ds);
// Draw sine^2 curve:
ds = new DataSeries();
ds.LineColor = Brushes.DarkGreen;
ds.SeriesName = "Sine^2";
ds.LinePattern = DataSeries.LinePatternEnum.Dot;
ds.LineThickness = 2;
for (int i = 0; i < 70; i++)
{
double x = i / 5.0;
double y = Math.Sin(x) * Math.Sin(x);
ds.LineSeries.Points.Add(new Point(x, y));
}
dc.DataList.Add(ds);
dc.AddLines(cs);
lg.LegendCanvas = legendCanvas;
lg.IsLegend = true;
lg.IsBorder = true;
lg.LegendPosition = Legend.LegendPositionEnum.NorthWest;
lg.AddLegend(cs.ChartCanvas, dc);
lg2 = new Legend();
lg2.LegendCanvas = legendCanvas2;
lg2.IsLegend = true;
lg2.IsBorder = true;
lg2.LegendPosition = Legend.LegendPositionEnum.NorthEast;
lg2.AddLegend(cs.ChartCanvas, dc);
}
private void chartGrid_SizeChanged(object sender, SizeChangedEventArgs e)
{
textCanvas.Width = chartGrid.ActualWidth;
textCanvas.Height = chartGrid.ActualHeight;
legendCanvas.Children.Clear();
legendCanvas2.Children.Clear();
chartCanvas.Children.RemoveRange(2, chartCanvas.Children.Count - 1); // changed index from 1 to 2
textCanvas.Children.RemoveRange(1, textCanvas.Children.Count - 1);
AddChart();
}
How to make animation stay within the canvas at bigger sizes when the user clicks around the edge of the canvas? Currently, if sizes are too big and if user clicks near the edge of the canvas, the ellipse will grow outside of the canvas to cover the buttons. I need the animation to stay within the canvas to make it look like a slice of pizza essentially.
Should look like this:
Size 50 where user clicks near top left of canvas
Currently looks like this:
Size 50 where user clicks near top left of canvas
Xaml:
<Window.Resources>
<Storyboard x:Key="anim">
<DoubleAnimation
Storyboard.TargetName="myCircle"
Storyboard.TargetProperty="RadiusX"
AutoReverse="True"/>
<DoubleAnimation
Storyboard.TargetName="myCircle"
Storyboard.TargetProperty="RadiusY"
AutoReverse="True"/>
<DoubleAnimation
Storyboard.TargetName="path"
Storyboard.TargetProperty="Opacity"
AutoReverse="True"/>
</Storyboard>
</Window.Resources>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="23"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0" Margin="0,0,0,1">
<Menu DockPanel.Dock="Top" Height="23">
<MenuItem Header="Main" RenderTransformOrigin="-1.896,0.643" HorizontalAlignment="Left" Width="39" Height="23">
<MenuItem Header="Exit, Esc" Click="MenuItem_Click_Exit"/>
</MenuItem>
</Menu>
</DockPanel>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="1" Name="pane">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" Name="pane2">
<Grid.RowDefinitions>
<RowDefinition Height="35"/>
<RowDefinition Height="35"/>
<RowDefinition Height="35"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Label Content="Size" Grid.Row="0" Grid.Column="0" Height="25" VerticalAlignment="Stretch"/>
<Label Content="Fill Color" Grid.Row="1" Grid.Column="0" Height="25" VerticalAlignment="Stretch"/>
<Label Content="Stroke Thickness" Grid.Row="2" Grid.Column="0" Height="25" VerticalAlignment="Stretch"/>
<Label Content="Stroke Color" Grid.Row="3" Grid.Column="0" VerticalAlignment="Top" Height="25"/>
<Slider x:Name="Slider_Size" Grid.Row="0" Grid.Column="1" Height="20" Width="45"
Minimum="5" Maximum="50"
AutoToolTipPlacement="BottomRight"
TickFrequency="1"
IsSnapToTickEnabled="True"
PreviewMouseUp="Slider_Size_PreviewMouseUp"/>
<Label Name="tempSize" Content="{Binding Path=Value, ElementName=Slider_Size}" Margin="0,25,0,131" Grid.Row="3" Visibility="Hidden"/>
<ComboBox Name="ComboBox_FillColor" Grid.Row="1" Grid.Column="1" Height="20" Width="45" SelectionChanged="ComboBox_FillColor_Selected"/>
<TextBox Name="textBox" Grid.Row="2" Grid.Column="1" Height="20" Width="45" TextChanged="textBox_TextChanged"/>
<ComboBox Name="ComboBox_StrokeColor" Grid.Row="3" Grid.Column="1" VerticalAlignment="Top" Height="20" Width="45" SelectionChanged="ComboBox_StrokeColor_Selected"/>
</Grid>
<Border Name ="border" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderBrush="Black" Grid.Column="1" BorderThickness="2">
<Canvas Name="canvas" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" MouseDown="Canvas_MouseDown">
<Path x:Name="path">
<Path.Data>
<EllipseGeometry x:Name="myCircle"/>
</Path.Data>
</Path>
<Canvas.Background>
<SolidColorBrush Color="White" Opacity="0"/>
</Canvas.Background>
</Canvas>
</Border>
</Grid>
</Grid>
C#:
public partial class MainWindow : Window
{
private int size;
private SolidColorBrush fillColor;
private SolidColorBrush strokeColor;
private List<SolidColorBrush> colors;
private int fillIndex;
private int strokeIndex;
private int strokeThickness = 1;
private int fillColorDefault;
private int strokeColorDefault;
private Point? _start = null;
public MainWindow()
{
InitializeComponent();
addColors();
textBox.Text = strokeThickness.ToString();
parse();
}
private void MenuItem_Click_Exit(object sender, RoutedEventArgs e) { Environment.Exit(1); }
private void Window_KeyUp_ESC(object sender, KeyEventArgs e)
{
if (Key.Escape == e.Key)
MenuItem_Click_Exit(sender, e);
}
private void addColors()
{
colors = typeof(Brushes).GetProperties().Select(p => p.GetValue(null, null) as SolidColorBrush).ToList();
int count = 0;
foreach (SolidColorBrush color in colors)
{
ComboBox_FillColor.Items.Add(new Rectangle() { Height = 12, Width = 17.5, Fill = color });
ComboBox_StrokeColor.Items.Add(new Rectangle() { Height = 12, Width = 17.5, Fill = color });
if (color.Color == Colors.Red)
{
fillIndex = count;
fillColor = colors[fillIndex];
ComboBox_FillColor.SelectedIndex = count;
fillColorDefault = count;
}
if (color.Color == Colors.Black)
{
strokeIndex = count;
strokeColor = colors[strokeIndex];
ComboBox_StrokeColor.SelectedIndex = count;
strokeColorDefault = count;
}
count++;
}
}
private void ComboBox_FillColor_Selected(object sender, RoutedEventArgs e) { fillIndex = ComboBox_FillColor.SelectedIndex; fillColor = colors[fillIndex]; }
private void ComboBox_StrokeColor_Selected(object sender, RoutedEventArgs e) { strokeIndex = ComboBox_StrokeColor.SelectedIndex; strokeColor = colors[strokeIndex]; }
private void Canvas_MouseDown(object sender, MouseButtonEventArgs e)
{
path.Stroke = strokeColor;
path.StrokeThickness = strokeThickness;
path.Fill = fillColor;
path.HorizontalAlignment = HorizontalAlignment.Stretch;
path.VerticalAlignment = VerticalAlignment.Stretch;
path.Stretch = Stretch.None;
path.SetValue(Grid.ColumnProperty, 1);
_start = Mouse.GetPosition((UIElement)sender);
myCircle.Center = (Point)_start;
var sb = FindResource("anim") as Storyboard;
var x = sb.Children.First() as DoubleAnimation;
x.To = 2 * size;
x.Duration = new Duration(TimeSpan.FromSeconds(0.5));
var y = sb.Children.ElementAt(1) as DoubleAnimation;
y.To = 2 * size;
y.Duration = new Duration(TimeSpan.FromSeconds(0.5));
var z = sb.Children.Last() as DoubleAnimation;
z.From = 0.0;
z.To = 1.0;
z.Duration = new Duration(TimeSpan.FromSeconds(0.5));
sb.Begin(path);
}
private void textBox_TextChanged(object sender, TextChangedEventArgs e)
{
//regex where any string of chars besides numbers
Regex pattern = new Regex(#"^([^0-9]*)$", RegexOptions.Compiled);
Match result = pattern.Match(textBox.Text);
if (textBox.Text.ToString() == string.Empty)
return;
else if (result.Success)
{
MessageBox.Show("Invalid character entered. Integer numbers only. Stroke Thickness will be reseted to a default of 1.");
strokeThickness = 1;
textBox.Text = strokeThickness.ToString();
textBox.SelectAll();
}
else
{
int x;
if (int.TryParse(textBox.Text, out x))
strokeThickness = int.Parse(textBox.Text);
}
}
private void Slider_Size_PreviewMouseUp(object sender, MouseButtonEventArgs e)
{
parse();
}
private void parse()
{
int x;
if (int.TryParse(tempSize.Content.ToString(), out x))
size = x;
}
}
}
So you don't need the ellipse to stay within the Canvas, but you want to clip away the parts leaving it, right? Just set ClipToBounds (of Canvas) to true (can be done in Xaml).
I'm implementing a drag and drop wpf application and i have created 3 ellipse, i'm using thumb control to drag and drop the ellipse in the map, and i wish to get the drop position for ellipse. However i get an error when drag ellipse as below:
Unable to cast object of type 'System.Windows.Controls.Grid' to type
'System.Windows.Shapes.Ellipse'
My XAML:
<Window x:Class="DragandDropMFP.MainWindow"
xmlns:local="clr-namespace:DragandDropMFP"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
Title="MainWindow" Height="350" Width="525">
<Grid x:Name="maingrid" MouseMove="MainGrid_MouseMove">
<Grid.Background>
<ImageBrush ImageSource="/Map/Capture.Png" />
</Grid.Background>
<Canvas>
<Thumb Canvas.Left="38" Canvas.Top="22" DragDelta="Thumb_DragDelta">
<Thumb.Template>
<ControlTemplate>
<Viewbox Width="50" Height="50">
<Grid Width="20" Height="20">
<Ellipse
Fill="Blue"
MouseMove="DragMouseMove"/>
<TextBlock HorizontalAlignment="Center" Text="Printer1" FontSize="4" TextAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Viewbox>
</ControlTemplate>
</Thumb.Template>
</Thumb>
<Thumb Canvas.Left="37" Canvas.Top="100" DragDelta="Thumb_DragDelta">
<Thumb.Template>
<ControlTemplate>
<Viewbox Width="50" Height="50">
<Grid Width="20" Height="20">
<Ellipse Fill="Yellow"
MouseMove="DragMouseMove"/>
<TextBlock HorizontalAlignment="Center" Text="Printer2" FontSize="4" TextAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Viewbox>
</ControlTemplate>
</Thumb.Template>
</Thumb>
<Thumb Canvas.Left="37" Canvas.Top="174" DragDelta="Thumb_DragDelta">
<Thumb.Template>
<ControlTemplate>
<Viewbox Width="50" Height="50">
<Grid Width="20" Height="20">
<Ellipse Fill="Red"
MouseMove="DragMouseMove"/>
<TextBlock HorizontalAlignment="Center" Text="Printer3" FontSize="4" TextAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Viewbox>
</ControlTemplate>
</Thumb.Template>
</Thumb>
</Canvas>
<TextBlock x:Name="ctlStatus" HorizontalAlignment="Stretch" Height="30" TextWrapping="Wrap" Text="status" VerticalAlignment="Bottom" RenderTransformOrigin="0.495,-4.7" />
</Grid>
</Window>
My xaml.cs :
public MainWindow()
{
InitializeComponent();
}
private void MainGrid_MouseMove(object sender, MouseEventArgs e)
{
Mouse.OverrideCursor = Cursors.Arrow;
objmoveposition(sender, e);
}
private void DragMouseMove(object sender, MouseEventArgs e)
{
Mouse.OverrideCursor = Cursors.Hand;
objmoveposition(sender, e);
}
private void objmoveposition(object sender, MouseEventArgs e)
{
if (e.LeftButton == MouseButtonState.Pressed)
{
if (Mouse.OverrideCursor == Cursors.Hand)
{
Ellipse objTextbox = (Ellipse)sender; <--Error
if (objTextbox != null)
{
//----< Move Control >----
Point mousePoint = e.GetPosition(this);
//< Vertical >
int posY = (int)mousePoint.Y;
int actHeight = (int)Application.Current.MainWindow.Height;
int margin_Bottom = actHeight - (posY + (int)objTextbox.Height + (int)SystemParameters.CaptionHeight + (int)SystemParameters.BorderWidth + 4);
//< Horizontal >
int posX = (int)mousePoint.X;
int actWidth = (int)Application.Current.MainWindow.Width;
int margin_Right = actWidth - (posX + (int)objTextbox.Width + (int)SystemParameters.BorderWidth);
ctlStatus.Text = "Top=" + posY + " margin_bottom=" + margin_Bottom + " WinHeigth=" + actHeight + Environment.NewLine + " Left=" + posX + " margin_Right=" + margin_Right + "WinWidth=" + actWidth;
//ctlStatus.Text = "position=" + objTextbox.ActualHeight;
}
}
}
}
private void Thumb_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
{
UIElement thumb = e.Source as UIElement;
Canvas.SetLeft(thumb, Canvas.GetLeft(thumb) + e.HorizontalChange);
Canvas.SetTop(thumb, Canvas.GetTop(thumb) + e.VerticalChange);
}
Output:
Your guidance is highly appreciated!
Thanks!
The sender is the ellipse that raised the event, so you can replace this:
Ellipse objTextbox = ellipse1;
with this;
Ellipse objTextbox = (Ellipse)sender;
As long as you only assign the event to ellipses this is safe. If it gets assigned to other object types you'll need to check the type of sender before casting.
You don't need the name of the object.
Just found out by changing the Ellipse to Grid and everything works like cham..
Ellipse objTextbox = (Ellipse)sender;
change to
Grid objTextbox = (Grid)sender;
Thanks!
I have canvas. In canvas i have 3 grids. And I can't animate them. I want to make slideshow with grids.
Here my xamll code:
<Canvas x:Name="canvas1" Width="200" Height="300" Background="AliceBlue">
<Grid Canvas.Left="0" Canvas.Right="200" Background="Red" Name="grid1">
</Grid>
<Grid Canvas.Left="200" Canvas.Right="400" Background="Blue" Name="grid2">
</Grid>
<Grid Canvas.Left="400" Canvas.Right="600" Background="Black" Name="grid3">
</Grid>
<Button Panel.ZIndex="1" Width="50" Height="50" Content="NEXT" Click="Button_Click">
</Button>
</Canvas>
Here my c# code:
private void Button_Click(object sender, RoutedEventArgs e)
{
TranslateTransform trans = new TranslateTransform();
TranslateTransform trans2 = new TranslateTransform();
grid1.RenderTransform = trans;
grid2.RenderTransform = trans2;
Storyboard storyboard = new Storyboard();
DoubleAnimation da = new DoubleAnimation();
DoubleAnimation da1 = new DoubleAnimation();
da = new DoubleAnimation(200, 0, TimeSpan.FromSeconds(1));
da1 = new DoubleAnimation(0, -200, TimeSpan.FromSeconds(1));
Storyboard.SetTarget(da1, grid1);
Storyboard.SetTargetProperty(da1, new PropertyPath("RenderTransform.(TranslateTransform.X)"));
Storyboard.SetTarget(da, grid2);
Storyboard.SetTargetProperty(da, new PropertyPath("RenderTransform.(TranslateTransform.X)"));
storyboard.Children.Add(da1);
storyboard.Children.Add(da);
//this.BeginStoryboard(storyboard, HandoffBehavior.SnapshotAndReplace, true);
FrameworkElement sd = new FrameworkElement();
sd.BeginStoryboard(storyboard, HandoffBehavior.Compose, true);
}
For now, i want to animate only 2 grids. i press button, and nothing happened.
I need to animate from the code.
That's how I do it:
Fist the button outside of the Canvas and place the Canvas in a Grid that has a Clip with the size of the objects inside the Canvas, I set 200x200 as example:
<Grid Width="200" Height="200">
<Grid.Clip>
<RectangleGeometry Rect="0,0,200,200"/>
</Grid.Clip>
<Canvas x:Name="canvas1" Background="AliceBlue" >
<Canvas.RenderTransform>
<TranslateTransform/>
</Canvas.RenderTransform>
<Grid Canvas.Left="0" Canvas.Right="200" Width="200" Height="200" Background="Red" Name="grid1">
</Grid>
<Grid Canvas.Left="200" Canvas.Right="400" Width="200" Height="200" Background="Blue" Name="grid2">
</Grid>
<Grid Canvas.Left="400" Canvas.Right="600" Width="200" Height="200" Background="Black" Name="grid3">
</Grid>
<Grid Canvas.Left="400" Canvas.Right="600" Width="200" Height="200" Background="Orange" Name="grid4">
</Grid>
</Canvas>
<Button VerticalAlignment="Bottom" Width="50" Height="50" Content="NEXT" Click="Button_Click">
</Button>
</Grid>
And now the logic for the button event
private void Button_Click(object sender, RoutedEventArgs e)
{
var offsetX = (canvas1.RenderTransform as TranslateTransform).X;
var finalX = offsetX - 200;
Storyboard sb = new Storyboard();
var da = new DoubleAnimation(offsetX, finalX, TimeSpan.FromSeconds(1));
Storyboard.SetTarget(da, canvas1);
Storyboard.SetTargetProperty(da, new PropertyPath("RenderTransform.(TranslateTransform.X)"));
sb.Children.Add(da);
sb.Begin();
}
I think is easy to understand and just one storyboard.
I hope it is the solution for your case.
In windows 8 application, I am dragging an image inside a canvas. I want to bound that image inside canvas. How can I do it?
Here is my code:
XAML
<Canvas x:Name="canvas1" Grid.Row="0" Grid.Column="0" Margin="0" Grid.ColumnSpan="2" Grid.RowSpan="2" Background="White" >
<Image x:Name="image1" Height="100" Width="100" Margin="0" HorizontalAlignment="Left" ManipulationDelta="Image_ManipulationDelta_1" ManipulationMode="All">
<Image.RenderTransform>
<CompositeTransform/>
</Image.RenderTransform>
</Image></Canvas>`
C#
private void Image_ManipulationDelta_1(object sender, ManipulationDeltaRoutedEventArgs e)
{
var imag = (CompositeTransform)image1.RenderTransform;
imag.TranslateX += e.Delta.Translation.X;
imag.TranslateY += e.Delta.Translation.Y;}
You already have the code:
CompositeTransform imgTrans = image1.TransformToVisual(canvas1);
Windows.Foundation.Point imgPoint = imgTrans.TransformPoint(new Windows.Foundation.Point());
var imag = (CompositeTransform)image1.RenderTransform;
if (imgPoint.X <= 0)
{
imag .TranslateX -= imgPoint.X + 5;
imag .TranslateY += e.Delta.Translation.Y;
}