I'm trying to animate the TranslateTransform and ScaleTransform of a Rectangle at the same time using a StoryBoard in code-behind. I studied some similar questions but I some how I'm still stuck at the first step.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Rectangle x:Name="MyRectangle" Width="100" Height="100" Fill="Aqua"></Rectangle>
<Button Grid.Row="1" Content="Animate" Click="ButtonBase_OnClick"/>
</Grid>
private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
{
var translate_x = new DoubleAnimation()
{
From = 0,
To = 100,
Duration = TimeSpan.FromSeconds(5),
};
var translate_y = new DoubleAnimation()
{
From = 0,
To = 100,
Duration = TimeSpan.FromSeconds(5),
};
var scale_x = new DoubleAnimation()
{
From = 1,
To = 2,
Duration = TimeSpan.FromSeconds(5),
};
var scale_y = new DoubleAnimation()
{
From = 1,
To = 2,
Duration = TimeSpan.FromSeconds(5),
};
}
In XAML, give your rectangle a TransformGroup:
<Rectangle x:Name="MyRectangle" Width="100" Height="100" Fill="Chartreuse">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform x:Name="rectScale"/>
<TranslateTransform x:Name="rectTrans"/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
In the code-behind, use the BeginAnimation method on the transforms:
rectScale.BeginAnimation(ScaleTransform.ScaleXProperty, scale_x);
rectScale.BeginAnimation(ScaleTransform.ScaleYProperty, scale_y);
rectTrans.BeginAnimation(TranslateTransform.XProperty, translate_x);
rectTrans.BeginAnimation(TranslateTransform.YProperty, translate_y);
If rectScale.BeginAnimation() doesn't work try
rectScale.RenderTransform.BeginAnimation(ScaleTransform.ScaleXProperty, scale_x);
Related
<Grid>
<Image x:Name="BackgroundImage" Source="/Assets/background.png" />
<Rectangle x:Name="ClippingRect" Margin="50" Fill="#30f0" />
</Grid>
How do I apply alpha mask, or clipping mask, so everything except the rectangle will be blurred?
I do the usual: GraphicsEffect->EffectFactory->Brush->Set to SpriteVisual
var graphicsEffect = new BlendEffect
{
Mode = BlendEffectMode.Multiply,
Background = new ColorSourceEffect
{
Name = "Tint",
Color = Windows.UI.Color.FromArgb(50,0,255,0),
},
Foreground = new GaussianBlurEffect()
{
Name = "Blur",
Source = new CompositionEffectSourceParameter("Backdrop"),
BlurAmount = (float)20,
BorderMode = EffectBorderMode.Hard,
}
};
var blurEffectFactory = _compositor.CreateEffectFactory(graphicsEffect,
new[] { "Blur.BlurAmount", "Tint.Color" });
var _brush = blurEffectFactory.CreateBrush();
_brush.SetSourceParameter("Backdrop", _compositor.CreateBackdropBrush());
var blurSprite = _compositor.CreateSpriteVisual();
blurSprite.Size = new Vector2((float)BackgroundImage.ActualWidth, (float)BackgroundImage.ActualHeight);
blurSprite.Brush = _brush;
ElementCompositionPreview.SetElementChildVisual(BackgroundImage, blurSprite);
You can use the following solution which is using twice the same image.
I'm using one for the blurred background and one for the clipped foreground.
The idea is to draw the background blurred full-size and over it only the clipped region you want using the Clip property for the foreground visual.
The XAML for the page/control:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Image x:Name="BackgroundImage" Source="/Assets/Purple Tentacle.png" />
<Image x:Name="ClippedImage" Source="/Assets/Purple Tentacle.png" />
</Grid>
The code behind:
protected override void OnNavigatedTo(NavigationEventArgs e)
{
_compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
_backgroundImageVisual = ElementCompositionPreview.GetElementVisual(BackgroundImage);
var graphicEffect = new BlendEffect
{
Mode = BlendEffectMode.Multiply,
Background = new ColorSourceEffect
{
Color= Color.FromArgb(50, 0, 255, 0)
},
Foreground = new GaussianBlurEffect
{
Source = new CompositionEffectSourceParameter("Backdrop"),
BlurAmount = 20.0f,
BorderMode = EffectBorderMode.Hard
}
};
var backdropBrush = _compositor.CreateBackdropBrush();
var blurEffectFactory = _compositor.CreateEffectFactory(graphicEffect);
_brush = blurEffectFactory.CreateBrush();
_brush.SetSourceParameter("Backdrop", backdropBrush);
_blurSprite = _compositor.CreateSpriteVisual();
_blurSprite.Brush = _brush;
ElementCompositionPreview.SetElementChildVisual(BackgroundImage, _blurSprite);
_foregroundImageVisual = ElementCompositionPreview.GetElementVisual(ClippedImage);
_foregroundImageVisual.Clip = _compositor.CreateInsetClip(100, 100, 100, 100);
SizeChanged += MainPage_SizeChanged;
MainPage_SizeChanged(this, null);
}
private void MainPage_SizeChanged(object sender, SizeChangedEventArgs e)
{
_blurSprite.Size = new Vector2((float) BackgroundImage.ActualWidth, (float) BackgroundImage.ActualHeight);
// change the clip values here to change the non-blurred region
_foregroundImageVisual.Clip = _compositor.CreateInsetClip(100, 100, 100, 100);
}
In Creators update, I can create class derived from XamlCompositionBrushBase and the apply it to the xaml element, so it does the blurring:
<Grid>
<Image x:Name="BackgroundImage" Source="/Assets/background.png" />
<Path>
<Path.Fill>
<local:BlurTintBrush BlurRadius="5" TintColor="Black" TintOpacity="0.7" />
</Path.Fill>
<Path.Data>
<GeometryGroup>
<RectangleGeometry x:Name="ImageGeometry" Rect="0,0,1027,768" /
<RectangleGeometry x:Name="CropGeometry" Rect="50,50,25,25" />
</GeometryGroup>
</Path.Data>
</Path>
</Grid>
I have a problem with setting a Column width in my grid. That grid is auto-generated inside a button and I don't know the actual width of it nor the width of a window. I have defined two columns in it, one has static width and for the second one I want to be set to all the left place. Problem is that I am generating all those grids and columns just at the moment of running of a program so I'm not able to use the width property of any other object as everything is double.NaN.
What I want to do is generating a button grid containing two columns, one static width and the second which width can change through the time like on the picture (the red text is just a comment).
The code I use for generating that grid. The problematic column is the one with width property set to "???" for now:
Button GridButton = new Button()
{
HorizontalAlignment = HorizontalAlignment.Stretch,
Margin = new Thickness { Left = 10, Right = 5, Top = 10, Bottom = 10 },
Height = 70,
/*HorizontalAlignment = HorizontalAlignment.Center,
HorizontalContentAlignment = HorizontalAlignment.Center,
VerticalAlignment = VerticalAlignment.Top,
VerticalContentAlignment = VerticalAlignment.Center,
*/
Tag = GridButtonTag,
Background = new SolidColorBrush(Colors.White),
Padding = new Thickness { Left = 0, Right = 0, Bottom = 0, Top = 0 }
};
WholeGrid.Children.Add(GridButton);
Grid ButtonContentGrid = new Grid()
{
Padding = new Thickness { Left = 0, Right = 0, Top = 0, Bottom = 0 },
};
double ColumnWidth = GridButton.Width - 80;
ColumnDefinition Column1 = new ColumnDefinition();
ColumnDefinition Column2 = new ColumnDefinition();
Column1.Width = new GridLength(????);
Column2.Width = new GridLength(90);
ButtonContentGrid.ColumnDefinitions.Add(Column1);
ButtonContentGrid.ColumnDefinitions.Add(Column2);
TextBlock Questions = new TextBlock()
{
Margin = new Thickness { Right = 0, Top = 0, Bottom = 0 },
Width = 90,
VerticalAlignment = VerticalAlignment.Center,
HorizontalAlignment = HorizontalAlignment.Right,
FontSize = 45,
Text = QuestionsAmount,
FontWeight = FontWeights.Bold,
TextAlignment = TextAlignment.Right
};
Grid QuestionsGrid = new Grid()
{
Width = 90,
VerticalAlignment = VerticalAlignment.Center,
HorizontalAlignment = HorizontalAlignment.Center
};
QuestionsGrid.Children.Add(Questions);
Grid.SetColumn(QuestionsGrid, 1);
ButtonContentGrid.Children.Add(QuestionsGrid);
Grid TwoTexts = new Grid()
{
Height = 70,
VerticalAlignment = VerticalAlignment.Center,
HorizontalAlignment = HorizontalAlignment.Stretch,
Width = GridButton.Width - 80,
Padding = new Thickness { Left = 0, Right = 0, Top = 0, Bottom = 0 }
};
RowDefinition TextRow1 = new RowDefinition();
RowDefinition TextRow2 = new RowDefinition();
TextRow1.Height = new GridLength(50);
TextRow2.Height = new GridLength(20);
TwoTexts.RowDefinitions.Add(TextRow1);
TwoTexts.RowDefinitions.Add(TextRow2);
TextBlock NameBox = new TextBlock()
{
Margin = new Thickness { Left = 0, Top = 0},
VerticalAlignment = VerticalAlignment.Top,
HorizontalAlignment = HorizontalAlignment.Left,
FontSize = 35,
Text = Name,
FontWeight = FontWeights.Bold
};
TextBlock DescriptionBox = new TextBlock()
{
Margin = new Thickness { Left = 0, Bottom = -10 },
VerticalAlignment = VerticalAlignment.Bottom,
HorizontalAlignment = HorizontalAlignment.Left,
FontSize = 15,
Text = Description
};
Grid.SetRow(NameBox, 0);
TwoTexts.Children.Add(NameBox);
Grid.SetColumn(DescriptionBox, 1);
TwoTexts.Children.Add(DescriptionBox);
Grid.SetColumn(TwoTexts, 0);
ButtonContentGrid.Children.Add(TwoTexts);
GridButton.Content = ButtonContentGrid;
Alternate option - ListView (still the same problem and again the Place With WidthValue="????" is the one I don't know how to set):
<ListView Name="FileListView" Margin="0,0,0,0" Padding="10,10,10,10">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Height="90" Margin="0,0,0,0" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="2"/>
<RowDefinition Height="92"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0"
BorderThickness="0,2"
CornerRadius="2"
BorderBrush="Black"
Margin="40,0"
VerticalAlignment="Top"
HorizontalAlignment="Stretch"
/>
<Grid Grid.Row="1" Height="90" Margin="0" Padding="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="65"/>
</Grid.ColumnDefinitions>
<Grid Name ="Texts" Grid.Column="0" HorizontalAlignment="Stretch" Margin="10,10">
<Button HorizontalAlignment ="Stretch" Margin ="0" Height = "70" Tag = "{Binding GridButtonTag}" Background ="#00FFFFFF" Padding = "0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="90"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1" FontSize = "45" FontWeight="Bold" TextAlignment="Right" Text="{Binding QuestionsAmount}" />
<Grid Grid.Column="0" Width="????">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" FontSize = "35" FontWeight="Bold" TextAlignment="Left" Text="{Binding Name}" VerticalAlignment="Center"/>
<TextBlock Grid.Row="1" FontSize = "17" TextAlignment="Left" Text="{Binding Description}" VerticalAlignment="Center"/>
</Grid>
</Grid>
</Button>
</Grid>
<Grid Grid.Column="1">
<Grid Name="Buttons" Width ="65" HorizontalAlignment="Stretch" Padding = "10,5,10,10" Height = "90" Margin = "0">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Tag = "{Binding PlayButtonTag}" Margin = "0" Height = "50" Width = "50" HorizontalAlignment = "Center" HorizontalContentAlignment = "Center" VerticalAlignment = "Top" VerticalContentAlignment = "Center" Background = "#00FFFFFF" Padding = "0">
<Image Width="50" Height="50" Source="ms-appx:///Assets/Images/PlayIcon.png" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Button>
<Grid Grid.Row="1" Margin="0,0,0,0" Padding="0,0,0,0" Width="50" Height="20">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Tag = "{Binding EditButtonTag}" Margin = "0" Height = "20" Width = "20" HorizontalAlignment = "Left" HorizontalContentAlignment = "Center" VerticalAlignment = "Top" VerticalContentAlignment = "Center" Background = "#00FFFFFF" Padding = "0">
<Image Width="20" Height="20" Source="ms-appx:///Assets/Images/EditIcon.png" HorizontalAlignment="Center" VerticalAlignment="Center"
</Button>
<Button Grid.Column="1" Margin = "0" Tag = "{Binding DeleteButtonTag}" Height = "20" Width = "20" HorizontalAlignment = "Right" HorizontalContentAlignment = "Center" VerticalAlignment = "Top" VerticalContentAlignment = "Center" Background = "#00FFFFFF" Padding = "0">
<Image Width="20" Height="20" Source="ms-appx:///Assets/Images/DeleteIcon.png" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Button>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The question is what should I change or write in that code to achieve the right result?
Thanks in advance.
I don't think you have to set the Width you're trying to set. The problem in this case should be that the content of the DataTemplate is not stretched at all.
You have to add the following lines to your ListView to let the content stretch:
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListView.ItemContainerStyle>
By the way, I see, you are using Grid with ColumnDefinitions or RowDefinitions really often in your ListView. This could slow down your UI.. You should consider using StackPanel and RelativePanel as well as removing some unnecessary Grids.
I'm new to Windows Phone programming. I want to create a gridview like the following:
I've done the <DataTemplate>, so I've already done the items and their buttons. But I can't set 2 columns for the grid using MaximumRowsOrColumns, because it limits my grid with only 2 rows (can be ilimited rows, but I need to have only 2 columns).
Coding as below was the closest I made:
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Vertical" MaximumRowsOrColumns="2"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
EDIT: added <DataTemplate>code:
<DataTemplate x:Key="gridClassItem">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="14.96"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="14.96" />
</Grid.ColumnDefinitions>
<Button x:Name="btnItem" Grid.Row="0" Grid.Column="0"
BorderThickness="0 0 0 2" Opacity="100"
Height="70.4" Width="174.24"
Background="#FF6B33"
Click="btnItem_OnClick">
<TextBlock x:Name="txtItem" FontSize="38" Foreground="#5B1F08" Opacity="100" Margin="0" Text="{Binding Name}" TextAlignment="Center"/>
</Button>
<Grid Grid.Row="1" Grid.Column="0" Margin="0, -8, 0, 0" Height="52.8">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="86.24"/>
<ColumnDefinition Width="86.24"/>
</Grid.ColumnDefinitions>
<Button x:Name="btn1" Click="btn1_OnClick"
Grid.Row="0" Grid.Column="0"
BorderBrush="#FFFFFF" BorderThickness="0 0 1.76 0"
Margin="-10, -15, 0, 0"
DataContext="{Binding}">
<Button.Background>
<ImageBrush ImageSource="\Assets\bt1.png" Stretch="UniformToFill"/>
</Button.Background>
</Button>
<Button x:Name="btn2" Click="btn2_OnClick"
Grid.Row="0" Grid.Column="1"
BorderBrush="#FFFFFF" BorderThickness="1.76 0 0 0"
Margin="0, -15, -2.5, 0"
DataContext="{Binding}">
<Button.Background>
<ImageBrush ImageSource="\Assets\bt2.png" Stretch="UniformToFill"/>
</Button.Background>
</Button>
</Grid>
<Rectangle Grid.Row="2" Grid.Column="1" Fill="#FFFFFF" Margin="0"/>
</Grid>
</DataTemplate>
Any suggestions?
By the way, any idea how could i change the GridViewItem's background color? I was thinking about a geometric series, like the first item will be orange, the followings - always counting by two - will be green and then orange again. But I don't know how to implement it.
Well, since I couldn't find a way to do it using XAML, I did it at C#. Below is my solution, if someone need something looked like:
enum GridItemColor
{
NONE,
BLUE,
RED
};
//Some event to populate a list
...
myGrid.Items.Clear();
GridItemColor lastColor = GridItemColor.NONE;
foreach (MyModel item in myList)
{
if (lastColor == GridItemColor.NONE || lastColor == GridItemColor.BLUE)
{
myGrid.Items.Add(FormatGridViewItem(item, GridItemColor.RED));
lastColor = GridItemColor.RED;
}
else if (lastColor == GridItemColor.RED)
{
myGrid.Items.Add(FormatGridViewItem(item, GridItemColor.BLUE));
lastColor = GridItemColor.BLUE;
}
}
...
private Grid FormatGridViewItem(MyModel currentItem, GridItemColor itemColor)
{
Grid gridItem = new Grid();
#region Grid Item Row Definition and GridItem Setup
RowDefinition itemRowDef = new RowDefinition();
RowDefinition minorButtonRowDef = new RowDefinition();
itemRowDef.Height = new GridLength(72);
minorButtonRowDef.Height = new GridLength(49);
gridItem.RowDefinitions.Add(classPlanRowDef);
gridItem.RowDefinitions.Add(minorButtonRowDef);
gridItem.MaxWidth = 196;
gridItem.Width = 196;
gridItem.Margin = new Thickness(0, 0, 24, 24);
#endregion
#region Button Item
Button btnItem = new Button();
btnItem.BorderThickness = new Thickness(0);
btnItem.Margin = new Thickness(-3, 0, 0, 0);
btnItem.Opacity = 100;
btnItem.MaxWidth = 203;
btnItem.MinWidth = 203;
btnItem.Height = 78;
btnItem.DataContext = currentItem;
if (itemColor == GridItemColor.RED)
btnItem.Background = new SolidColorBrush(Windows.UI.Color.FromArgb(0xFF, 255, 107, 51));
else
btnItem.Background = new SolidColorBrush(Windows.UI.Color.FromArgb(0xFF, 23, 229, 192));
btnItem.Click += btnItem_Click;
TextBlock txtItem = new TextBlock();
txtItem.FontSize = 40;
if (itemColor == GridItemColor.RED)
txtItem.Foreground = new SolidColorBrush(Windows.UI.Color.FromArgb(0xFF, 91, 31, 8));
else
txtItem.Foreground = new SolidColorBrush(Windows.UI.Color.FromArgb(0xFF, 3, 97, 80));
txtItem.Opacity = 100;
txtItem.TextAlignment = TextAlignment.Center;
txtItem.Text = currentItem.Name;
txtItem.TextTrimming = TextTrimming.CharacterEllipsis;
btnItem.Content = txtItem;
gridItem.Children.Add(btnItem);
Grid.SetRow(btnItem, 0);
#endregion
#region Grid Minor Buttons Row
Grid minorButtonsRow = new Grid();
minorButtonsRow.Margin = new Thickness(0);
if (itemColor == GridItemColor.RED)
minorButtonsRow.Background = new SolidColorBrush(Windows.UI.Color.FromArgb(0xFF, 255, 107, 51));
else
minorButtonsRow.Background = new SolidColorBrush(Windows.UI.Color.FromArgb(0xFF, 23, 229, 192));
ColumnDefinition btnOneColumnDef = new ColumnDefinition();
ColumnDefinition btnTwoColumnDef = new ColumnDefinition();
btnOneColumnDef.Width = new GridLength(98);
btnTwoColumnDef.Width = new GridLength(98);
minorButtonsRow.ColumnDefinitions.Add(btnOneColumnDef);
minorButtonsRow.ColumnDefinitions.Add(btnTwoColumnDef);
// Button One
Button btnOne = new Button();
btnOne.BorderBrush = new SolidColorBrush(Windows.UI.Color.FromArgb(0xFF, 255, 255, 255));
btnOne.BorderThickness = new Thickness(0);
btnOne.MinWidth = 97;
btnOne.MaxWidth = 97;
btnOne.MinHeight = 48;
btnOne.MaxHeight = 48;
btnOne.Margin = new Thickness(0, 0, 1, 0);
btnOne.DataContext = currentItem;
btnOne.Click += btnOne_Click;
ImageBrush imgOne = new ImageBrush();
BitmapImage bitImg;
if (itemColor == GridItemColor.RED)
{
bitImg = new BitmapImage(new Uri("ms-appx:/Assets/Icons/btOneRED.png", UriKind.RelativeOrAbsolute));
btnOne.Style = (Style)this.Resources["btnOneRedStyle"];
}
else
{
bitImg = new BitmapImage(new Uri("ms-appx:/Assets/Icons/btOneBLUE.png", UriKind.RelativeOrAbsolute));
btnOne.Style = (Style)this.Resources["btnOneBlueStyle"];
}
imgOne.ImageSource = bitImg;
imgOne.Stretch = Stretch.UniformToFill;
btnOne.Background = imgOne;
minorButtonsRow.Children.Add(btnOne);
Grid.SetRow(btnOne, 0);
Grid.SetColumn(btnOne, 0);
// END Button One
// Button Two
Button btnTwo = new Button();
btnTwo.BorderBrush = new SolidColorBrush(Windows.UI.Color.FromArgb(0xFF, 255, 255, 255));
btnTwo.BorderThickness = new Thickness(0);
btnTwo.MinWidth = 97;
btnTwo.MaxWidth = 97;
btnTwo.MinHeight = 48;
btnTwo.MaxHeight = 48;
btnTwo.Margin = new Thickness(1, 0, 0, 0);
btnTwo.DataContext = currentItem;
btnTwo.Click += btnTwo_Click;
ImageBrush imgTwo = new ImageBrush();
BitmapImage bitImgTwo;
if (itemColor == GridItemColor.RED)
{
bitImgTwo = new BitmapImage(new Uri("ms-appx:/Assets/Icons/btTwoRED.png", UriKind.RelativeOrAbsolute));
btnTwo.Style = (Style)this.Resources["btnTwoRedStyle"];
}
else
{
bitImgTwo = new BitmapImage(new Uri("ms-appx:/Assets/Icons/bt_AgendaVerde.png", UriKind.RelativeOrAbsolute));
btnTwo.Style = (Style)this.Resources["btnTwoBlueStyle"];
}
imgTwo.ImageSource = bitImgTwo;
imgTwo.Stretch = Stretch.UniformToFill;
btnTwo.Background = imgTwo;
minorButtonsRow.Children.Add(btnTwo);
Grid.SetRow(btnTwo, 0);
Grid.SetColumn(btnTwo, 1);
gridItem.Children.Add(minorButtonsRow);
Grid.SetRow(minorButtonsRow, 1);
Grid.SetColumn(minorButtonsRow, 0);
// END Button Two
#endregion
return gridItem;
}
If you have DataTemplate done correctly, then you don't need the ItemsPanel template. Can you show the code for DataTemplate? Because with it you can do pretty much everything.
For the colors. Declare brushes on your ViewModel and then assign it to your classes.Then just bind the Background. You only need one for each color.
Color binding: say you have SolidColorBrush property on your model named BgBrush. All you need to do is declare Background property on your control (i.e. grid) as "{Binding BgBrush}"
I want to change the scale of Rectangle using storyboard, I don't know why it doesn't work. Looking forward to anyone's reply! The C# code is:
Storyboard sb = new Storyboard();
InitializeComponent();
DoubleAnimation daScaleX = new DoubleAnimation();
daScaleX.From = 1;
daScaleX.To = 2;
daScaleX.Duration = TimeSpan.FromSeconds(3);
DoubleAnimation daScaleY = new DoubleAnimation();
daScaleY.From = 1;
daScaleY.To = 2;
daScaleY.Duration = TimeSpan.FromSeconds(3);
BounceEase easing = new BounceEase()
{
EasingMode = EasingMode.EaseOut
};
daScaleX.EasingFunction = easing;
daScaleY.EasingFunction = easing;
Storyboard.SetTargetProperty(daScaleX, new PropertyPath("ScaleX"));
Storyboard.SetTarget(daScaleX, st);
Storyboard.SetTargetProperty(daScaleY, new PropertyPath("ScaleY"));
Storyboard.SetTarget(daScaleY, st);
sb.Children.Add(daScaleX);
sb.Children.Add(daScaleY);
sb.Begin();
The XAML file is:
<Grid>
<StackPanel>
<Rectangle x:Name="rect" Fill="Blue" Width="200" Height="40" Margin="5" RenderTransformOrigin="0.5,0.5">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform x:Name="st" ScaleX="1" ScaleY="1" />
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
</StackPanel>
</Grid>
Try this below code separately..it works for me
<Grid>
<StackPanel>
<Rectangle x:Name="rect" Fill="Blue" Width="200" Height="40" Margin="5" RenderTransformOrigin="0.5,0.5">
<Rectangle.RenderTransform>
<ScaleTransform x:Name="st" ScaleX="1.0" ScaleY="1.0"></ScaleTransform>
</Rectangle.RenderTransform>
</Rectangle>
</StackPanel>
</Grid>
and did this animation on windows loaded event
void MainWindow_Loaded(object sender, RoutedEventArgs e)
{
Storyboard sb = new Storyboard();
DoubleAnimation daScaleX = new DoubleAnimation();
daScaleX.From = 1;
daScaleX.To = 2;
daScaleX.Duration = TimeSpan.FromMilliseconds(300);
DoubleAnimation daScaleY = new DoubleAnimation();
daScaleY.From = 1;
daScaleY.To = 2;
daScaleY.Duration = TimeSpan.FromMilliseconds(300);
BounceEase easing = new BounceEase()
{
EasingMode = EasingMode.EaseOut
};
daScaleX.EasingFunction = easing;
daScaleY.EasingFunction = easing;
Storyboard.SetTargetProperty(daScaleX, new PropertyPath("RenderTransform.ScaleX"));
Storyboard.SetTarget(daScaleX, rect);
Storyboard.SetTargetProperty(daScaleY, new PropertyPath("RenderTransform.ScaleY"));
Storyboard.SetTarget(daScaleY, rect);
sb.Children.Add(daScaleX);
sb.Children.Add(daScaleY);
sb.Begin();
}
I have a Grid which scaled/zoomed with ScaleTransform by slider. At runtime many UIElements are added to this Grid.
I want to show some tooltips, but not scaled! How should I do that?
For the example: Grid has scaleX and scaleY 2, so I set new ScaleTransform(0.5, 0.5), but didn't help. It seems that the most similar value is 0.740.. Why?
Even Grid's LayoutTransform.Inverse is set to scale values 0.5.
XAML:
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Height="Auto" Width="Auto" Name="graphScrollViewer" ScrollChanged="graphScrollViewer_ScrollChanged">
<Grid Margin="0,0,0,0" Name="graphGrid" Width="Auto" Height="Auto" ScrollViewer.IsDeferredScrollingEnabled="True" MouseLeftButtonDown="graphGrid_MouseLeftButtonDown" MouseLeftButtonUp="graphGrid_MouseLeftButtonUp" MouseMove="graphGrid_MouseMove">
<Grid.LayoutTransform>
<ScaleTransform ScaleX="{Binding ElementName=sldZoom, Path=Value}" ScaleY="{Binding ElementName=sldZoom, Path=Value}" />
</Grid.LayoutTransform>
</Grid>
</ScrollViewer>
<Slider Minimum="0.1" Maximum="20" Value="1" x:Name="sldZoom" Panel.ZIndex="10" Orientation="Horizontal" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0,0,20,20" Height="23" Width="100" ValueChanged="sldZoom_ValueChanged"/>
Code-behind:
(method of Rectangle (MouseEnter event) dynamically added to grid)
private void rect_MouseEnter(object sender, MouseEventArgs e)
{
RectToolTip = new TextBlock();
RectToolTip.HorizontalAlignment = HorizontalAlignment.Left;
RectToolTip.VerticalAlignment = VerticalAlignment.Top;
RectToolTip.TextAlignment = TextAlignment.Center;
RectToolTip.Height = this.HeaderTwoHeight + 1;
RectToolTip.Text = " " + (RectsTasks[(sender as Rectangle)]).Info + " ";
RectToolTip.Background = this.ToolTipBackground;
RectToolTip.Foreground = this.ToolTipFontColor;
RectToolTipBorder = new Border();
RectToolTipBorder.Child = RectToolTip;
RectToolTipBorder.BorderThickness = new Thickness(this.ToolTipBorderThickness);
RectToolTipBorder.BorderBrush = this.ToolTipBorderColor;
RectToolTipBorder.Margin = new Thickness(e.GetPosition((graphGrid)).X + 10, e.GetPosition((graphGrid)).Y + 10, 0, 0);
RectToolTipBorder.VerticalAlignment = System.Windows.VerticalAlignment.Top;
RectToolTipBorder.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;
graphGrid.Children.Add(RectToolTipBorder);
RectToolTipBorder.LayoutTransform = RectToolTip.LayoutTransform = new ScaleTransform(????);
Grid.SetZIndex(RectToolTip, 20);
Grid.SetZIndex(RectToolTipBorder, 20);
}
You need to assign the inverse transform to the child element, so that the child will stay intact.
RectToolTipBorder.LayoutTransform = graphGrid.LayoutTransform.Inverse as Transform;