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;
Related
In my project i'm drawing lines on canvas using this code.
List<Line> DrawingLines = new List<Line>();
DrawingLines.Add(new Line() { X1 = X(200), X2 = X(500), Y1 = Y(50), Y2 = Y(50), Stroke = Brushes.Blue });
DrawingLines.Add(new Line() { X1 = X(500), X2 = X(600), Y1 = Y(50), Y2 = Y(100), Stroke = Brushes.Green });
DrawingLines.Add(new Line() { X1 = X(600), X2 = X(200), Y1 = Y(100), Y2 = Y(100), Stroke = Brushes.Red });
DrawingLines.Add(new Line() { X1 = X(200), X2 = X(200), Y1 = Y(100), Y2 = Y(50), Stroke = Brushes.Black });
foreach (Line line in DrawingLines)
{
ph.Children.Add(line);
}
What i want, but i dont know if thats possible is to have a textbox with some informations on point A(x1,y1) and also on point B(x2,y2) for every line i make.
Here is my Xaml code
<StackPanel Background="White" Width="Auto">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Canvas x:Name="ph" Height="449" Width="623" Panel.ZIndex="1" Grid.Row="0">
<Image Height="449" Width="623" Grid.Row="0" x:Name="LogPHImage" MouseLeftButtonDown="MouseLeftButtonDown_Click" MouseMove="LogPHImage_MouseMove" Source="../UserControls/PHgraph.png" HorizontalAlignment="Center" VerticalAlignment="Top"/>
</Canvas>
<Border BorderThickness="1" BorderBrush="LightGray" Grid.Row="1">
<StackPanel Orientation="Horizontal">
<Label Width="70" Content="X Coordinates"/>
<TextBox x:Name="xgrid" Width="70" HorizontalAlignment="Left" Background="DarkGray"/>
<Label Width="80" HorizontalAlignment="Left">Y Coordinates</Label>
<TextBox x:Name="ygrid" Width="70" HorizontalAlignment="Left" Background="DarkGray"/>
<Label Width="80" HorizontalAlignment="Left" Content="Entalpy (kJ/kg)"/>
<TextBox x:Name="entalpy" Width="70" HorizontalAlignment="Left" Background="DarkGray"/>
<Label Width="80" HorizontalAlignment="Left" Content="Pressure bara"/>
<TextBox x:Name="pressure" Width="70" HorizontalAlignment="Left" Background="DarkGray"/>
</StackPanel>
</Border>
</Grid>
</StackPanel>
Hope you guys can help me :)
Thanks
You can add TextBlocks at specific positions in a Canvas by setting the Canvas.Left and Canvas.Top attached properties:
foreach (Line line in DrawingLines)
{
ph.Children.Add(line);
var tb1 = new TextBlock { Text = "A" };
Canvas.SetLeft(tb1, line.X1);
Canvas.SetTop(tb1, line.Y1);
ph.Children.Add(tb1);
var tb2 = new TextBlock { Text = "B" };
Canvas.SetLeft(tb2, line.X2);
Canvas.SetTop(tb2, line.Y2);
ph.Children.Add(tb2);
}
Add arbitrary offsets to X1, Y1, X2, Y2 for a proper alignment.
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 have a WPF Canvas with a TextBlock and an Image on it. The text is animated, but it doesn't look smooth. I tried many combinations of different FPS-Settings and durations but it won't get better.
I also want to let the text fade-in/out at the start and ending. But I found no methods to do so.
At the moment it looks like that:
How can I get the animation smoothly? How can I fade it in/out smoothly?
Before you ask, I need to show the Window invisible because I use the WpfAppBar and that component needs an HWND.
Here is the canvas xaml:
<Canvas x:Name="canMain" HorizontalAlignment="Stretch" VerticalAlignment="Center">
<Border x:Name="boLogo" Panel.ZIndex="2" Height="40" Background="Gray" Canvas.Left="0" Canvas.Top="-20">
<Image Height="39" Width="auto" Margin="5, 0, 5, 0" Source="pack://siteoforigin:,,,/Resources/Logo.png" />
</Border>
<TextBlock x:Name="tbInfo" Panel.ZIndex="1" Visibility="Hidden" RenderOptions.BitmapScalingMode="NearestNeighbor" FontSize="32" TextOptions.TextFormattingMode="Display" TextOptions.TextRenderingMode="ClearType" FontFamily="Arial" FontWeight="Bold" Padding="5" HorizontalAlignment="Stretch" VerticalAlignment="Center">
<TextBlock.RenderTransform>
<TranslateTransform x:Name="AnimatedTranslateTransform" X="0" Y="0" />
</TextBlock.RenderTransform>
</TextBlock>
</Canvas>
And the code to animate the text:
public void ShowWindow(Brush fontColor, Brush backgroundColor, string str) {
var helper = new WindowInteropHelper(this);
helper.EnsureHandle();
tbInfo.Foreground = fontColor;
this.Background = backgroundColor;
tbInfo.Text = str;
this.Height = 39;
this.Width = SystemParameters.WorkArea.Width;
this.Left = SystemParameters.PrimaryScreenWidth - this.Width;
ShowWindowInvisible();
WpfAppBar.AppBarFunctions.SetAppBar(this, WpfAppBar.ABEdge.Top);
Visibility = Visibility.Visible;
int duration = 10 + str.Length / 5;
TextMarquee(duration);
}
private void TextMarquee(int duration)
{
Timeline.DesiredFrameRateProperty.OverrideMetadata(
typeof(Timeline),
new FrameworkPropertyMetadata { DefaultValue = 60 }
);
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;
}
private void ShowWindowInvisible()
{
var width = Width;
var height = Height;
var windowStyle = WindowStyle;
var showInTaskbar = ShowInTaskbar;
var showActivated = ShowActivated;
Width = 0;
Height = 0;
WindowStyle = WindowStyle.None;
ShowInTaskbar = false;
ShowActivated = false;
Show();
Visibility = Visibility.Hidden;
Width = width;
Height = height;
WindowStyle = windowStyle;
ShowInTaskbar = showInTaskbar;
ShowActivated = showActivated;
}
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 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