I have the following border in XAML:
<Border
Grid.Column="0"
Grid.ColumnSpan="3"
Grid.RowSpan="3"
CornerRadius="1,1,1,1"
Background="Red"
BorderBrush="#333333"
BorderThickness="1,1,1,1"
x:Name="border"
RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform />
<TranslateTransform />
</TransformGroup>
</Border.RenderTransform>
<ContentPresenter
x:Name="contentPresenter"
Margin="10,0,10,0"
ContentTemplate="{TemplateBinding ContentTemplate}"
VerticalAlignment="Center"
HorizontalAlignment="Center" />
</Border>
and I'm trying to create a similar border in code behind (C#). I can't get beyond Border b = new Border(), I'm not sure how I'm supposed to put the border inside the specific grid column or how to span it.
Any ideas?
Something like this:
var border = new Border();
Grid.SetColumn(border, 0);
Grid.SetColumnSpan(border, 3);
Grid.SetRowSpan(border, 3);
border.CornerRadius = new CornerRadius(1);
border.Background = new SolidColorBrush(Colors.Red);
border.BorderBrush = new SolidColorBrush(Color.FromArgb(0xff, 0x33, 0x33, 0x33));
border.BorderThickness = new Thickness(1);
border.RenderTransformOrigin = new Point(0.5, 0.5);
var transformGroup = new TransformGroup();
transformGroup.Children.Add(new ScaleTransform());
transformGroup.Children.Add(new SkewTransform());
transformGroup.Children.Add(new RotateTransform());
transformGroup.Children.Add(new TranslateTransform());
border.RenderTransform = transformGroup;
Let me know if you want me to set the rest of the properties.
If that can help you :
Border b = new Border();
Grid.SetColumn(b, 0);
Grid.SetColumnSpan(b, 3);
Grid.SetRowSpan(b, 3);
b.CornerRadius = new CornerRadius(1);
b.Background = new SolidColorBrush(Colors.Red);
// Then add your border to the grid
g.Children.Add(b);
But for the ContentPresneter I dont know how to do that
Related
I want to have a Body sized 400x400 on MessagePrompt but can't find a property to remove extra spaces besides Body!
var objMessagePrompt = new MessagePrompt
{
VerticalAlignment = VerticalAlignment.Center,
Body = new BodyPage(),
IsCancelVisible = false,
MaxWidth = 400,
MaxHeight = 400,
IsOverlayApplied=false,
BorderThickness=new Thickness(0,0,0,0),
Padding = new Thickness(0, 0, 0, 0),
Margin = new Thickness(0, 0, 0, 0),
};
objMessagePrompt.ActionPopUpButtons.Clear();
objMessagePrompt.Show();
This is the style i used to override current style:
<ControlTemplate x:Key="MsgPropmtNoBorder" TargetType="c4f:MessagePrompt">
<Grid VerticalAlignment="Stretch">
<Rectangle Fill="Transparent" />
<Border VerticalAlignment="Top"
Margin="0"
Background="{TemplateBinding Background}"
BorderThickness="0"
BorderBrush="{StaticResource PhoneForegroundBrush}">
<StackPanel Margin="0">
<ContentPresenter Content="{TemplateBinding Body}" />
</StackPanel>
</Border>
</Grid>
</ControlTemplate>
I have wired Manipulation events with the listviewitem to capture left swipe and right swipe. But when I try to scroll down the listview, it does not work! The manipulation events get fired and the listview does not scroll!
This is the listview Datatemplate
<Grid Height="60" Width="380" Margin="0,0,0,1">
<Grid x:Name="ItemGrid" HorizontalAlignment="Left" VerticalAlignment="Center" Width="380" Height="60" Background="Orange" Canvas.ZIndex="2"
ManipulationMode="TranslateX" ManipulationStarted="On_ChannelItem_ManipulationStarted" ManipulationDelta="On_ChannelItem_ManipulationDelta" ManipulationCompleted="OnChannelItemManipulationCompleted">
<TextBlock x:Name="titleTextBlock" Margin="20,0,0,0" Canvas.ZIndex="2" VerticalAlignment="Center" TextAlignment="Left" FontSize="25" >
</TextBlock>
</Grid>
<Grid x:Name="DelGrid" Opacity="0.0" HorizontalAlignment="Right" VerticalAlignment="Center" Height="60" Background="Red" Canvas.ZIndex="-1" Tapped="On_ChannelDelete_Tap" Width="380">
<Button Content="X" FontSize="25" Canvas.ZIndex="-1" VerticalAlignment="Center" HorizontalAlignment="Center" Width="380" BorderThickness="0" />
</Grid>
</Grid>
This is the manipulation events
private void OnChannelItemManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
{
Grid ChannelGrid = (Grid)sender;
Grid DeleteGrid = (Grid)((Grid)(ChannelGrid.Parent)).Children[1];
double dist = e.Cumulative.Translation.X;
if (dist < -100) // Swipe left
{
Storyboard SwipeLeft = new Storyboard();
DoubleAnimation OpacityAnimation = new DoubleAnimation();
OpacityAnimation.EnableDependentAnimation = true;
OpacityAnimation.From = 0.0;
OpacityAnimation.To = 1.0;
OpacityAnimation.BeginTime = TimeSpan.FromMilliseconds(0);
OpacityAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(1));
Storyboard.SetTarget(OpacityAnimation, DeleteGrid);
Storyboard.SetTargetProperty(OpacityAnimation, "Opacity");
SwipeLeft.Children.Add(OpacityAnimation);
DoubleAnimation WidthAnimation = new DoubleAnimation();
WidthAnimation.EnableDependentAnimation = true;
WidthAnimation.From = 380;
WidthAnimation.To = 0;
WidthAnimation.BeginTime = TimeSpan.FromMilliseconds(30);
WidthAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(100));
Storyboard.SetTarget(WidthAnimation, ChannelGrid);
Storyboard.SetTargetProperty(WidthAnimation, "Width");
SwipeLeft.Children.Add(WidthAnimation);
SwipeLeft.Begin();
}
else if (dist > 100) // Swipe right
{
Storyboard SwipeRight = new Storyboard();
ColorAnimation changeColorAnimation = new ColorAnimation();
changeColorAnimation.EnableDependentAnimation = true;
changeColorAnimation.To = Colors.Green;
changeColorAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(100));
Storyboard.SetTarget(changeColorAnimation, ChannelGrid);
PropertyPath p = new PropertyPath("(ChannelGrid.Background).(SolidColorBrush.Color)");
Storyboard.SetTargetProperty(changeColorAnimation, p.Path);
SwipeRight.Children.Add(changeColorAnimation);
SwipeRight.Begin();
}
}
How do I enable the normal listview scrolling as well as the swipe? Vertical Scrolling is possible when I remove the manipulation events
Update your manipulation mode to include System:
ManipulationMode="TranslateX,System"
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;
Why does the following C# code not produce the equivalent of my Silverlight code?
XAML
<Border CornerRadius="8" BorderBrush="White" Height="70" BorderThickness="4">
<StackPanel Orientation="Horizontal">
<Border Margin="5,0,0,0" BorderBrush="White" Height="45" Width="45" BorderThickness="2" CornerRadius="2" Background="White">
<Image Source="/Crystal%20Cloud;component/Resources/Images/weapons/swords/sword_0.png" />
</Border>
<StackPanel Margin="10,0,0,0">
<TextBlock Text="Wooden Dagger" FontFamily="Comic Sans MS" />
<TextBlock Text="DPS: 1" FontFamily="Comic Sans MS" FontSize="16" Margin="15,0,0,0" />
</StackPanel>
</StackPanel>
</Border>
C#
private Border CreateListItem(Item item)
{
// Main border
Border itemBorder = new Border();
itemBorder.BorderThickness = new Thickness(4);
itemBorder.CornerRadius = new CornerRadius(8);
itemBorder.BorderBrush = new SolidColorBrush(Colors.White);
itemBorder.Height = 70;
// Main stack panel
StackPanel mainPanel = new StackPanel();
mainPanel.Orientation = Orientation.Horizontal;
itemBorder.Child = mainPanel;
// The item's image border
Border imageBorder = new Border();
imageBorder.Margin = new Thickness(5, 0, 0, 0);
itemBorder.BorderThickness = new Thickness(2);
itemBorder.CornerRadius = new CornerRadius(2);
itemBorder.BorderBrush = new SolidColorBrush(Colors.White);
itemBorder.Background = new SolidColorBrush(Colors.White);
itemBorder.Height = 45;
itemBorder.Width = 45;
mainPanel.Children.Add(imageBorder);
// The item's image
Image image = new Image();
image.Source = new BitmapImage(new Uri("/Crystal%20Cloud;component/Resources/Images/weapons/swords/sword_0.png"));
imageBorder.Child = image;
// The stack panel for the text
StackPanel textPanel = new StackPanel();
textPanel.Margin = new Thickness(10, 0, 0, 0);
mainPanel.Children.Add(textPanel);
// The title text block
TextBlock titleText = new TextBlock();
titleText.Text = "Wooden Dagger";
titleText.FontFamily = new FontFamily("Comic Sans MS");
textPanel.Children.Add(titleText);
// The status text block
TextBlock statusText = new TextBlock();
statusText.Text = "DPS: 1";
statusText.FontFamily = new FontFamily("Comic Sans MS");
statusText.FontSize = 16;
statusText.Margin = new Thickness(15, 0, 0, 0);
textPanel.Children.Add(statusText);
return itemBorder;
}
Erg... just found the bug itemBorder should be changed to imageBorder.