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.

NotifyProperty not triggering

I've got two buttons on the same page, one just below my gallery and one in a bottom navigation bar. Both commands trigger but the bottom one is broken. It never goes to my NOTIFYProperyChanged
<Label Grid.Row="0" Grid.Column="0" Text="IMAGES" XAlign="Start" YAlign="Center" Style="{StaticResource Labelfont}" TextColor="White"/>
<Grid x:Name="ImageGallerys">
<Grid.RowDefinitions>
<RowDefinition Height="*">
</RowDefinition>
<RowDefinition Height="128">
</RowDefinition>
<RowDefinition Height="Auto">
</RowDefinition>
</Grid.RowDefinitions>
<Image
Source="{Binding PreviewImage}" Grid.Row="0">
</Image>
<custom:ImageGallery ItemsSource="{Binding Images}" Grid.Row="1">
<custom:ImageGallery.ItemTemplate>
<DataTemplate>
<Image Source="{Binding Source}" Aspect="AspectFit">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Path=BindingContext.PreviewImageCommand, Source={x:Reference EditIssue}}" CommandParameter="{Binding ImageId}" />
</Image.GestureRecognizers>
</Image>
</DataTemplate>
</custom:ImageGallery.ItemTemplate>
</custom:ImageGallery>
<Button
Grid.Row="2" Text="Photo" Command="{Binding CameraCommand}">
</Button>
<Button
Grid.Row="2" Text="Pick" Command="{Binding PickCommand}">
</Button>
</Grid>
<!--Bottom Navigation Bar-->
<Grid Grid.Row="2">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<StackLayout x:Name="slButtons" Grid.ColumnSpan="3" Grid.Row="1" Orientation="Horizontal" HorizontalOptions="FillAndExpand" Spacing="5" BackgroundColor="White">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" BackgroundColor="#FBB040">
<Button
Grid.Row="2" Text="Pick" Command="{Binding PickCommand}">
</Button>
</StackLayout>
This is the method just before the NotifyProperty should be called.
public async Task ExecutePickCommand()
{
var file = await CrossMedia.Current.PickPhotoAsync();
if (file == null)
return;
byte[] imageAsBytes = null;
using (var memoryStream = new MemoryStream())
{
file.GetStream().CopyTo(memoryStream);
file.Dispose();
imageAsBytes = memoryStream.ToArray();
}
if (imageAsBytes.Length > 0)
{
var resizer = DependencyService.Get<IImageResize>();
imageAsBytes = resizer.ResizeImage(imageAsBytes, 1080, 1080);
var imageSource = ImageSource.FromStream(() => new MemoryStream(imageAsBytes));
_images.Add(new GalleryImage { Source = imageSource, OrgImage = imageAsBytes });
}
}
This is the Notifypropery part, it supposed to go into the method ItemSourceChange as it does with my first button, with the second button it just ends after.
public static readonly BindableProperty ItemsSourceProperty =
BindableProperty.Create<ImageGallery, IList>(
view => view.ItemsSource,
default(IList),
BindingMode.TwoWay,
propertyChanging: (bindableObject, oldValue, newValue) => {
((ImageGallery)bindableObject).ItemsSourceChanging();
},
propertyChanged: (bindableObject, oldValue, newValue) => {
((ImageGallery)bindableObject).ItemsSourceChanged(bindableObject, oldValue, newValue);
}
);
public IList ItemsSource
{
get
{
return (IList)GetValue(ItemsSourceProperty);
}
set
{
SetValue(ItemsSourceProperty, value);
}
}
void ItemsSourceChanging()
{
if (ItemsSource == null)
return;
}
void ItemsSourceChanged(BindableObject bindable, IList oldValue, IList newValue)
{
if (ItemsSource == null)
return;
var notifyCollection = newValue as INotifyCollectionChanged;
if (notifyCollection != null)
{
notifyCollection.CollectionChanged += (sender, args) => {
if (args.NewItems != null)
{
if (args.NewItems.Count > 0)
{
foreach (var newItem in args.NewItems)
{
var view = (View)ItemTemplate.CreateContent();
var bindableObject = view as BindableObject;
if (bindableObject != null)
bindableObject.BindingContext = newItem;
_imageStack.Children.Add(view);
}
}
}
else
{
_imageStack.Children.Clear();
foreach (var Item in ItemsSource)
{
var view = (View)ItemTemplate.CreateContent();
var bindableObject = view as BindableObject;
if (bindableObject != null)
bindableObject.BindingContext = Item;
_imageStack.Children.Add(view);
}
}
if (args.OldItems != null)
{
// not supported
}
};
I discovered if I did this, it finaly calls notifyproperty like in the upper button. But it crashes now due to nullreference error in this button, as it seems to create Another instance or something?
<custom:ImageGallery ItemsSource="{Binding Images}" Grid.Row="1" x:Name="ImageGalleryss">
<Button
Grid.Row="3" Text="Pick" Command="{Binding PickCommand}">
</Button>
</custom:ImageGallery>

WPF Custom Window Maximization Problems

I'm quite new to WPF and am trying to build a GUI in Blend, but I'm running into all sorts of issues.
I want my finished product to look like this: https://imgur.com/a/BU8Te
(the red is just a placeholder for icons).
Here is the XAML I've got so far:
<Window x:Class="GUI.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:GUI"
mc:Ignorable="d"
Title="GUI"
Height="840"
Width="920"
WindowStyle="none"
ResizeMode="CanResizeWithGrip"
AllowsTransparency="true"
MouseLeftButtonDown="Window_MouseLeftButtonDown"
WindowStartupLocation="CenterScreen"
Background="Transparent"
MaxWidth="{Binding Source={x:Static SystemParameters.WorkArea}, Path=Width}"
MaxHeight="{Binding Source={x:Static SystemParameters.WorkArea}, Path=Height}">
<Border x:Name="shadow">
<Grid x:Name="grid" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="100"/>
<RowDefinition Height="2"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Grid.Row="0" Background="#F9F9F9" />
<Border Grid.Row="1" Background="#F9F9F9" />
<Border Grid.Row="2" Background="#E9E9E9" />
<DockPanel Grid.Row="0" LastChildFill="False">
<Button x:Name="btnClose"
DockPanel.Dock="Right"
VerticalAlignment="Center"
Height="20" Width="20"
Click="btnClose_Click"
Style="{DynamicResource CloseButton}">
<Path Data="m 357.0883 499.0572 12.62375 12.6275 5.31375 -5.31625 -12.62625 -12.62625 12.62625 -12.61875 -5.31375 -5.3125 -12.62375 12.62 -12.6325 -12.62 -5.30375 5.3125 12.6175 12.61875 -12.6175 12.62625 5.30375 5.31625 12.6325 -12.6275 z" Stretch="Uniform" Fill="#FFAAAAAA" Width="10" Margin="0,0,0,0" ></Path>
</Button>
<Button x:Name="btnMaximise"
DockPanel.Dock="Right"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Height="20" Width="20"
Click="btnMaximise_Click"
Style="{DynamicResource TitleButton}">
<Path Data="M4.3685131,23.127279L4.3685131,47.283243 47.117023,47.283243 47.117023,23.127279z M0,10.684L53.755001,10.684 53.755001,51.668001 0,51.668001z M8.5679998,0L58.668022,0 64,0 64,5.6864691 64,45.317999 58.668022,45.317999 58.668022,5.6864691 8.5679998,5.6864691z"
Stretch="Uniform" Fill="#FFAAAAAA" Width="10" Margin="0,0,0,0" ></Path>
</Button>
<Button x:Name="btnMinimise"
HorizontalAlignment="Center"
VerticalAlignment="Center"
DockPanel.Dock="Right"
Height="20" Width="20"
Click="btnMinimise_Click"
VerticalContentAlignment="Bottom"
Style="{DynamicResource TitleButton}">
<Button.Content>
<Path Data="M0,20L53.333,20 53.333,8.888 0,8.888z"
Stretch="Uniform" Fill="#FFAAAAAA" Width="10" Margin="0,0,0,5"></Path>
</Button.Content>
</Button>
</DockPanel>
</Grid>
</Border>
</Window>
But when I maximise the window, the top left corner is off my screen (-15, -15 maybe?) and the bottom right corner is also too far up and left because of this. I modified some code that I found online (can't remember the source) which fixed this:
private bool isMaximized;
private Rect normalBounds;
private void MainWindow_OnStateChanged(object sender, EventArgs e)
{
if (WindowState == WindowState.Maximized && !isMaximized)
{
// max
WindowState = WindowState.Normal;
isMaximized = true;
normalBounds = RestoreBounds;
Height = SystemParameters.WorkArea.Height;
MaxHeight = Height;
MinHeight = Height;
Top = 0;
Left = 0;
Width = SystemParameters.WorkArea.Width;
SetMovable(false);
}
else if (WindowState == WindowState.Maximized && isMaximized)
{
// min
WindowState = WindowState.Normal;
isMaximized = false;
MaxHeight = Double.PositiveInfinity;
MinHeight = 0;
Top = normalBounds.Top;
Left = normalBounds.Left;
Width = normalBounds.Width;
Height = normalBounds.Height;
SetMovable(true);
}
}
private void SetMovable(bool enable)
{
HwndSource source = HwndSource.FromHwnd(new WindowInteropHelper(this).Handle);
if (enable)
source.RemoveHook(WndProc);
else
source.AddHook(WndProc);
}
private static IntPtr WndProc(IntPtr hwnd, int msg, IntPtr wParam, IntPtr lParam, ref bool handled)
{
const int WM_SYSCOMMAND = 0x0112;
const int SC_MOVE = 0xF010;
switch (msg)
{
case WM_SYSCOMMAND:
int command = wParam.ToInt32() & 0xfff0;
if (command == SC_MOVE)
handled = true;
break;
}
return IntPtr.Zero;
}
Now that works perfectly, but I'm really struggling to get this to work with a drop shadow on the window. When I add a 10px border to the window and set the dropshadow on this, I get the resizing icon in my border and not in my window:
https://imgur.com/a/S9oLK
I also had to modify the StateChanged event method to hide the border when maximised:
private void MainWindow_OnStateChanged(object sender, EventArgs e)
{
if (WindowState == WindowState.Maximized && !isMaximized)
{
// max
WindowState = WindowState.Normal;
isMaximized = true;
normalBounds = RestoreBounds;
Height = SystemParameters.WorkArea.Height;
MaxHeight = Height;
MinHeight = Height;
Top = 0;
Left = 0;
Width = SystemParameters.WorkArea.Width;
SetMovable(false);
this.grid.Margin = new Thickness(0);
this.BorderThickness = new Thickness(0);
}
else if (WindowState == WindowState.Maximized && isMaximized)
{
// min
WindowState = WindowState.Normal;
isMaximized = false;
MaxHeight = Double.PositiveInfinity;
MinHeight = 0;
Top = normalBounds.Top;
Left = normalBounds.Left;
Width = normalBounds.Width;
Height = normalBounds.Height;
SetMovable(true);
this.grid.Margin = new Thickness(10);
this.BorderThickness = new Thickness(10);
}
}
But this obviously doesn't work when the window is snapped to the edge of a screen: https://i.imgur.com/pGC1fio.png
To summarise, my issues are:
Resize grabber is in border not main window.
I don't know how to hide the border when the window is snapped to the edge of the screen.
Is there a simple way to fix this? I feel like I'm having to create a very hacky fix for all of this and thought it would be a lot easier to implement a custom window like this.
Thanks in advance for any help.

how to access elements in a StackPanel in listbox

I have a ListBox that contains a StackPanel which contains an Image and a TextBlock. I want to access the TextBlock via c# (code-behind) to change it's font manually.
Relevent XAML:
<ListBox x:Name="CategoriesListBox" Margin="0,0,-12,0" ItemsSource="{Binding Categories}" SelectionChanged="CategoriesListBox_SelectionChanged" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17" Width="432" Height="62">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image x:Name="catImage" Source="{Binding icon}"/>
<TextBlock x:Name="catName" Grid.Column="1" Text="{Binding name_shown}" TextWrapping="Wrap" Style="{StaticResource PhoneTextLargeStyle}"/>
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I need to access the "catName" TextBlock for all cells.

try this--->
private T FindFirstElementInVisualTree<T>(DependencyObject parentElement) where T : DependencyObject
{
var count = VisualTreeHelper.GetChildrenCount(parentElement);
if (count == 0)
return null;
for (int i = 0; i < count; i++)
{
var child = VisualTreeHelper.GetChild(parentElement, i);
if (child != null && child is T)
{
return (T)child;
}
else
{
var result = FindFirstElementInVisualTree<T>(child);
if (result != null)
return result;
}
}
return null;
}
u can use above method in this way--->
ListBoxItem item = this.list.ItemContainerGenerator.ContainerFromIndex(2) as ListBoxItem;
TextBlock txt = FindFirstElementInVisualTree<TextBlock>(item);
txt.Text = "some text";

WP7/ XAML change image source on app start if theme is light

my image is inside the datatemplate, what I want to do it is change the image if the wp theme is light
<DataTemplate x:Key="citiesItemTemplate">
<StackPanel Grid.Column="1" VerticalAlignment="Top">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Height="50" Tap="ProgLngGropus_Tap" Text="{Binding Name}" FontSize="26" Margin="12,-5,12,6"/>
<ToggleButton Grid.Column="2" x:Name="MyToggleButton" Style="{StaticResource FlipButton}">
<ToggleButton.Content>
<Image Grid.Column="2" Margin="0,-10,-33,0" Height="40" Width="40" x:Name="ArrowDownImg" Source="/Images/appbar.dark.arrow.down.circle.rest.png" />
</ToggleButton.Content>
</ToggleButton>
<TextBlock TextWrapping="Wrap" Text="{Binding Lang}" Grid.Column="0" Grid.Row="1" x:Name="Desc"
Foreground="Orange" Visibility="{Binding ElementName=MyToggleButton,
Path=IsChecked, Converter={StaticResource ValueConverterBoolToVis}}">
</TextBlock>
</Grid>
</StackPanel>
</DataTemplate>
But Im unable to access ArrowDownImg
Visibility darkBackgroundVisibility = (Visibility)Application.Current.Resources["PhoneDarkThemeVisibility"];
if (darkBackgroundVisibility != Visibility.Visible)
{
//Error in finding ArrowDownImg
***//ArrowDownImg.Source = "/Images/appbar.light.arrow.down.circle.rest.png"***
}

You could also do
Image arrowDownImg = MyObjectUsingTheDataTemplate.FindVisualChild("ArrowDownImg") as Image;
arrowDownImg.Source = ...
by using the following extension methods
public static FrameworkElement FindVisualChild(this FrameworkElement root, string name)
{
FrameworkElement temp = root.FindName(name) as FrameworkElement;
if (temp != null)
return temp;
foreach (FrameworkElement element in root.GetVisualDescendents())
{
temp = element.FindName(name) as FrameworkElement;
if (temp != null)
return temp;
}
return null;
}
public static IEnumerable<FrameworkElement> GetVisualDescendents(this FrameworkElement root)
{
Queue<IEnumerable<FrameworkElement>> toDo = new Queue<IEnumerable<FrameworkElement>>();
toDo.Enqueue(root.GetVisualChildren());
while (toDo.Count > 0)
{
IEnumerable<FrameworkElement> children = toDo.Dequeue();
foreach (FrameworkElement child in children)
{
yield return child;
toDo.Enqueue(child.GetVisualChildren());
}
}
}
public static IEnumerable<FrameworkElement> GetVisualChildren(this FrameworkElement root)
{
for (int i = 0; i < VisualTreeHelper.GetChildrenCount(root); i++)
{
yield return VisualTreeHelper.GetChild(root, i) as FrameworkElement;
}
}

Answer: Here is what I did
I have added the loaded event
<ToggleButton Grid.Row="0" Grid.Column="2" Margin="0,-10,-33,0" x:Name="MyToggleButton" Style="{StaticResource FlipButton}">
<ToggleButton.Content>
<Image Loaded="ArrowDownImg_Loaded" Height="50" Width="50" x:Name="ArrowDownImg" />
</ToggleButton.Content>
</ToggleButton>
and in the event:
private void ArrowDownImg_Loaded(object sender, RoutedEventArgs e)
{
Visibility darkBackgroundVisibility = (Visibility)Application.Current.Resources["PhoneDarkThemeVisibility"];
var ArrowDownImg = sender as Image;
if (darkBackgroundVisibility != Visibility.Visible)
{
ArrowDownImg.Source = new BitmapImage(new Uri("/Images/appbar.arrow.down.circle.dark.rest.png", UriKind.Relative));
}
else
{
ArrowDownImg.Source = new BitmapImage(new Uri("/Images/appbar.arrow.down.circle.light.rest.png", UriKind.Relative));
}
}