We Keep Coding

Show textbox on point A and point B after drawing a Line on Canvas WPF

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.

WPF Databound Grid Scaling

I want to bind data to a grid in xaml. This is the code I am using for binding it:
<Grid x:Name="Example" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<ContentPresenter Content="{Binding ExampleImage}" />
</Grid>
Now when I bind it using fixed width and height it will display the grid at set dimensions.
Code:
private Grid _exampleImage;
public Grid ExampleImage
{
get
{
if (SelectedSectie != null)
{
var convertFromString = System.Windows.Media.ColorConverter.ConvertFromString("#CCCCCC");
if (convertFromString != null)
{
DropShadowEffect dse = new DropShadowEffect
{
BlurRadius = 5,
ShadowDepth = 1,
Direction = 270,
Color =
(System.Windows.Media.Color)
convertFromString
};
_exampleImage = new Grid
{
Background =
new SolidColorBrush(SingleIcons.Helpers.ColorConverter.ToMediaColor(SelectedSectie.Color.ColorValue)),
VerticalAlignment = VerticalAlignment.Stretch,
Width = SelectedIconSize.Width,
Height = SelectedIconSize.Height,
MaxWidth = SelectedIconSize.Width,
MaxHeight = SelectedIconSize.Height,
HorizontalAlignment = System.Windows.HorizontalAlignment.Stretch,
Effect = dse,
RowDefinitions =
{
new RowDefinition {Height = new GridLength(46, GridUnitType.Star)},
new RowDefinition {Height = new GridLength(3, GridUnitType.Star)}
}
};
}
TextBlock afbeeldingTextBlock = new TextBlock
{
Text = _selectedSectie.Sectie,
TextWrapping = TextWrapping.Wrap,
TextAlignment = TextAlignment.Center,
Width = _exampleImage.Width,
FontSize = Global.Fontsize,
FontFamily = new System.Windows.Media.FontFamily(Global.Family.Name),
VerticalAlignment = VerticalAlignment.Center,
Foreground =
new SolidColorBrush(
SingleIcons.Helpers.ColorConverter.ToMediaColor(SelectedSectie.Color.TextColorValue)),
};
TextOptions.SetTextFormattingMode(afbeeldingTextBlock, TextFormattingMode.Display);
TextOptions.SetTextRenderingMode(afbeeldingTextBlock, TextRenderingMode.ClearType);
Canvas bottomCanvas = new Canvas
{
Background = (SolidColorBrush) (new BrushConverter().ConvertFrom("#26000000"))
};
Grid.SetRow(afbeeldingTextBlock, 0);
Grid.SetRow(bottomCanvas, 1);
_exampleImage.Children.Add(afbeeldingTextBlock);
_exampleImage.Children.Add(bottomCanvas);
_exampleImage.Measure(new System.Windows.Size(_exampleImage.Width,
_exampleImage.Height));
_exampleImage.Arrange(
new Rect(new System.Windows.Size(_exampleImage.Width, _exampleImage.Height)));
return _exampleImage;
}
else
{
return null;
}
}
}
Now what I would like to do is to keep the grid at set dimensions but allow the GUI to scale the grid,
because when I make the window smaller the grid stays at these dimensions and it hurts the scaling of the application.
The reason I am using a databound grid is because I have another function which exports this grid to a .png.

Putting it inside a Viewbox and setting StretchDirection to DownOnly was the result i wanted.
<Grid x:Name="Example" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Viewbox StretchDirection="DownOnly" >
<ContentPresenter Content="{Binding ExampleImage}" />
</Viewbox>
</Grid>

How To Create a Grid inside a Listview Binding Xamarin.Forms

How can I create a Grid inside a ListView with data binding? I am creating this app with Xamarin.Forms.
If I don't know how many rows and columns I need, how can I dynamically create the Grid inside the ListView binding?
This is what I have so far:
<ListView x:Name="List" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid Padding="10,10,10,10">
<Grid.RowDefinitions>
<RowDefinition Height="200"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackLayout BackgroundColor="#313FA0" Grid.Row="0" Grid.Column="0" HeightRequest="200" WidthRequest="200">
<Label Text="{Binding NUMBER}" FontSize="50" TextColor="White" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
<Label Text="{Binding NAME}" FontSize="30" TextColor="White" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
</StackLayout>
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
In this code only one row and one column are created. If I have multiple data points, how can I resolve this issue? For example, if I need one row with two columns.

You can use the next approach-example (throug xaml, front side) as well.
<ContentPage.Resources>
<ResourceDictionary>
<Color x:FactoryMethod="FromHex" x:Key="fondoBlancoPalido">
<x:Arguments>
<x:String>#F2F2F2</x:String>
</x:Arguments>
</Color>
</ResourceDictionary>
</ContentPage.Resources>
<ListView x:Name="listView" HasUnevenRows="True" ItemsSource="{Binding .}" BackgroundColor="{StaticResource fondoBlancoPalido}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid Padding="5">
<Grid.RowDefinitions>
<RowDefinition Height="60"></RowDefinition>
<RowDefinition Height="60"></RowDefinition>
<RowDefinition Height="10"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
<ColumnDefinition Width="3*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0" Clicked="OnStartClicked" Image="play.png" BackgroundColor="Transparent" HorizontalOptions="Center" Grid.RowSpan="2"/>
<Label Grid.Row="0" Grid.Column="1" Text="Hora de Inicio: " XAlign="Center" YAlign="Center" TextColor="Black" FontAttributes="Bold"/>
<Label Grid.Row="0" Grid.Column="2" Text="{ Binding attribute3 }" XAlign="Center" YAlign="Center" TextColor="Black"/>
<Label Grid.Row="1" Grid.Column="1" Text="Encargado de la Tarea: " XAlign="Center" YAlign="Center" TextColor="Black" FontAttributes="Bold"/>
<Label Grid.Row="1" Grid.Column="2" Text="{ Binding attribute4 }" XAlign="Center" YAlign="Center" TextColor="Black"/>
<BoxView Color="Navy" HeightRequest="2" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3"/>
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

There is not a good way to dynamically build a Grid layout with a variable number of rows or columns in XAML. I suggest creating the DataTemplate in your code-behind file, where you can easily add as many RowDefinitions and ColumnDefinitions as you need. Here's an example:
var myDataTemplate = new DataTemplate(() =>
{
var cell = new ViewCell();
var grid = new Grid();
foreach (var record in myRecords)
{
grid.RowDefinitions.Add(new RowDefinition());
}
foreach (var field in myFields)
{
grid.ColumnDefinitions.Add(new ColumnDefinition());
}
/*
*
* Populate grid here...
*
*/
cell.View = grid;
return cell;
});
Then just assign this DataTemplate to your ListView.

If you want to add rows and column dynamically you can create a grid in the page.cs and bind it in the page.xaml. Suppose you have array of items and you want to sort them in grid :
public page()
{
string[] items = {"Item 1","Item 2",......."Item n"};
var itemsGrid = new Grid();
int k = 1 + items.Length / 3;
// just to make it clear in the for loop i used (int k)
// suppose 3 column need we divide on 3
// define the number of rows according to the number of item you have
for (int i = 0; i <k ; i++)
{
itemsGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
}
// defining column number (in this case 3)
for (int j = 0; j < 3; j++)
{
itemsGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
}
// adding the items to the grid (3 column , RN rows)
int RN = 0; // initializing the row number
for (int num = 0; num < items.Length; num++)
{
if (num % 3 == 0) // first column
{
itemsGrid.Children.Add(new Label() // adding the item as label
{
Text = items[num],
TextColor = Color.White,
BackgroundColor = Color.Blue,
HorizontalOptions = LayoutOptions.FillAndExpand,
HorizontalTextAlignment = TextAlignment.Center,
VerticalTextAlignment = TextAlignment.Center
}, 0, RN);
}
else if (num % 3 == 1)// second column
{
itemsGrid.Children.Add(new Label()
{
Text = items[num],
TextColor = Color.White,
BackgroundColor = Color.Blue,
HorizontalOptions = LayoutOptions.FillAndExpand,
HorizontalTextAlignment = TextAlignment.Center,
VerticalTextAlignment = TextAlignment.Center
}, 1, RN);
}
else //third column
{
itemsGrid.Children.Add(new Label()
{
Text = items[num],
TextColor = Color.White,
BackgroundColor = Color.Blue,
HorizontalOptions = LayoutOptions.FillAndExpand,
HorizontalTextAlignment = TextAlignment.Center,
VerticalTextAlignment = TextAlignment.Center
}, 2, RN);
RN++;
}
}
}

Scale child back in WPF

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;

how to create listview to a grid programmatically

I have a grid with columns and rows define. By knowing x amount of items, I can add it to my xaml no problem. Unfortuantely I want to create the listview programatically because I want to populate them based on x amount of item I get when executing my SP. Here is my xaml. The label is there to assign a given content from the SP result too. Can someone show me how create this programatically?
<Grid Name="grdItems" Width="939" Grid.Row="1" HorizontalAlignment="Left" DataContext="{Binding}" Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="5"></RowDefinition>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="5"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="231"></ColumnDefinition>
<ColumnDefinition Width="5"></ColumnDefinition>
<ColumnDefinition Width="231"></ColumnDefinition>
<ColumnDefinition Width="5"></ColumnDefinition>
<ColumnDefinition Width="231"></ColumnDefinition>
<ColumnDefinition Width="5"></ColumnDefinition>
<ColumnDefinition Width="231"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Name="lblItem" Grid.Row="0" Grid.Column="0" Content="item label" />
<ListView Name="lstFirstItem" HorizontalAlignment="Left" VerticalAlignment="Top"
Height="auto" Margin="0,0,0,0" ItemsSource="" FontWeight="Regular"
Grid.Column="0" Grid.Row="1">
<ListView.View>
<GridView>
<GridView.ColumnHeaderContainerStyle>
<Style>
<Setter Property="FrameworkElement.Visibility" Value="Collapsed"/>
</Style>
</GridView.ColumnHeaderContainerStyle>
<GridViewColumn Width="58" DisplayMemberBinding="{Binding ItemName}"></GridViewColumn>
<GridViewColumn Width="174.25" DisplayMemberBinding="{Binding ItemDescription}"></GridViewColumn>
</GridView>
</ListView.View>
</ListView>
</Grid>

we can add rows or columns dynamically from code behind.
Inorder to add rows:
GridLength rowheight = new GridLength(100); //your own value we can give *,Auto as well
RowDefinition rowDef = new RowDefinition {Height = rowheight };
mainGrid.RowDefinitions.Add(rowDef);
Inorder to add colomns:
GridLength columnwidth = new GridLength(100);
ColumnDefinition colDef = new ColumnDefinition { Width = columnwidth};
mainGrid.ColumnDefinitions.Add(colDef );
Inorder to add textblock at particular row,column
TextBlock textBlock = new TextBlock();
textBlock.Text = "Some Value";
Grid.SetRow(textBlock, rowNum);
Grid.SetColumn(textBlock, colNum);
mainGrid.Children.Add(textBlock);
Hope this answers your question

This work perfectly for me:
ListView Lv_Report = new ListView();
Lv_Report.Name = "Lv_Report";
Lv_Report.FontSize = 14;
Lv_Report.Height = 300;
Lv_Report.Width = 800;
Canvas.SetTop(Lv_Report, 10);
Canvas.SetLeft(Lv_Report, 30);
Cv_Scheduler.Children.Add(Lv_Report);
Lv_Report.Background = null;
LinearGradientBrush myLinearGradientBrush = new LinearGradientBrush();
myLinearGradientBrush.StartPoint = new System.Windows.Point(0, 0);
myLinearGradientBrush.EndPoint = new System.Windows.Point(0, 1);
Color color = (System.Windows.Media.Color)System.Windows.Media.ColorConverter.ConvertFromString("#7FFFFFFF");
myLinearGradientBrush.GradientStops.Add(new GradientStop(color, 0.02));
color = (System.Windows.Media.Color)System.Windows.Media.ColorConverter.ConvertFromString("#BFBADF69");
myLinearGradientBrush.GradientStops.Add(new GradientStop(color, 0.19));
color = (System.Windows.Media.Color)System.Windows.Media.ColorConverter.ConvertFromString("#7FF9FCF2");
myLinearGradientBrush.GradientStops.Add(new GradientStop(color, 1));
color = (System.Windows.Media.Color)System.Windows.Media.ColorConverter.ConvertFromString("#BEB9DE67");
myLinearGradientBrush.GradientStops.Add(new GradientStop(color, 0.83));
Style style = new Style(typeof(GridViewColumnHeader));
style.Setters.Add(new Setter()
{
Property = GridViewColumnHeader.BackgroundProperty,
Value = myLinearGradientBrush
});
var Lvitems = new List<string>();
Lvitems.Add("WorkOrder");
Lvitems.Add("Module1");
GridView Gv = new GridView();
foreach (String item in Lvitems)
{
DataTemplate Dtemplate = new DataTemplate();
var markup =
"<DataTemplate xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\" xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\" xmlns:local=\"clr-namespace:SubMeteringElectric;assembly=SubMeteringElectric\">"
+ "<StackPanel>"
+ "<Label Content =\"{Binding Lv_RSH_" + item + "}\" Width = \"100\" Height = \"30\" HorizontalContentAlignment = \"Center\" FontSize = \"14\" />"
+ "</StackPanel>"
+ "</DataTemplate>";
byte[] byteArray = Encoding.UTF8.GetBytes(markup);
MemoryStream stream = new MemoryStream(byteArray);
Dtemplate = (DataTemplate)XamlReader.Load(stream);
GridViewColumn Gvc_item = new GridViewColumn();
Gvc_item.Header = item;
Gvc_item.Width = 150;
Gvc_item.CellTemplate = Dtemplate;
Gv.Columns.Add(Gvc_item);
}
Gv.ColumnHeaderContainerStyle = style;
Lv_Report.View = Gv;
}