We Keep Coding

Horizontal dynamic listbox with insert buttons

I would like to create an horizontal dynamic listbox:
A button is visible when the mouse is between two items.
<ListBox
MinHeight="32"
dd:DragDrop.IsDragSource="True"
dd:DragDrop.IsDropTarget="True"
SelectionMode="Extended"
HorizontalAlignment="Stretch">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel IsItemsHost="True" Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBoxItem>
<TextBlock><Run Text="C1" /></TextBlock>
</ListBoxItem>
<ListBoxItem>
<TextBlock><Run Text="C2" /></TextBlock>
</ListBoxItem>
<ListBoxItem>
<TextBlock><Run Text="C3" /></TextBlock>
</ListBoxItem>
<ListBoxItem>
<TextBlock><Run Text="C4" /></TextBlock>
</ListBoxItem>
</ListBox>
</ListBox>
Any suggestions, please?
Thank you
EDIT
private void myElement_MouseEnter(object sender, MouseEventArgs e)
{
//change button visibility
if (sender is Grid item)
{
if (item.DataContext is DataModel data)
{
System.Diagnostics.Debug.WriteLine("myElement_MouseEnter: " + data.TextValue);
}
var border1 = (Border)item.FindName("HitTestBorder1");
var border2 = (Border)item.FindName("HitTestBorder2");
if (border1 is Border)
{
var margin = border1.Margin;
margin.Left = -item.ActualWidth;
border1.Margin = margin;
}
if (border2 is Border)
{
var margin = border2.Margin;
margin.Left = item.ActualWidth;
border2.Margin = margin;
}
}
}
The problem is that the grid width is resized after mouse_enter... So, I don't get the overlay "effect".

Here is the solution.
I created a canvas. It contains 2 borders with button inside and ZPanel is setted very high (=1000) to be on top of everything.
I change the position of these borders on MouseEnter and MouseLeave events of ListBoxItem (see ItemTemplate).
XAML
<Border Padding="10">
<Canvas x:Name="supergrid" MouseLeave="supergrid_MouseLeave">
<Border x:Name="HitTestBorder1"
Panel.ZIndex="1000"
Background="Transparent"
BorderBrush="Transparent"
HorizontalAlignment="Center"
VerticalAlignment="Center"
BorderThickness="0,0,0,0" >
<Button x:Name="button1"
Visibility="Hidden"
Content="+"
Height="18" Width="18" FontSize="6" Background="Red"
Click="button1_Click"
/>
</Border>
<Border x:Name="HitTestBorder2"
Panel.ZIndex="1000"
Background="Transparent"
BorderBrush="Transparent"
HorizontalAlignment="Center"
VerticalAlignment="Center"
BorderThickness="1,1,1,1" >
<Button x:Name="button2"
Visibility="Hidden"
Content="+"
Height="18" Width="18" FontSize="6" Background="Green"
Click="button2_Click"
/>
</Border>
<ListBox x:Name="HorizontalListBox"
ItemsSource="{Binding DataModels}"
Margin="0,0,0,0"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
Background="Yellow" MouseLeave="HorizontalListBox_MouseLeave">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<!--<Setter Property="MinWidth" Value="60" />
<Setter Property="MinHeight" Value="40" />-->
<Setter Property="Background" Value="Blue" />
<Setter Property="Margin" Value="0" />
<Setter Property="Padding" Value="0" />
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="myElement"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
MouseEnter="myElement_MouseEnter"
MouseLeave="myElement_MouseLeave"
Background="White">
<TextBlock x:Name="myText"
Margin="10"
Text="{Binding TextValue}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
TextAlignment="Center" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Canvas>
</Border>
C#
public partial class MainWindow : Window
{
private DataModel currentDataModel;
public ObservableCollection<DataModel> DataModels { get; }
public MainWindow()
{
InitializeComponent();
this.DataContext = this;
this.DataModels = new ObservableCollection<DataModel>();
this.DataModels.Add(new DataModel("Item1"));
this.DataModels.Add(new DataModel("Item2"));
this.DataModels.Add(new DataModel("SuperMegaHyperLong"));
this.DataModels.Add(new DataModel("Item3"));
this.DataModels.Add(new DataModel("Item4"));
this.DataModels.Add(new DataModel("123"));
this.DataModels.Add(new DataModel("Item5"));
}
private void myElement_MouseEnter(object sender, MouseEventArgs e)
{
updateOverlay((Grid)sender);
}
private void updateOverlay(Grid lbi)
{
if (lbi is Grid item) //the grid of listboxitem
{
if (item.DataContext is DataModel data)
{
Debug.WriteLine("myElement_MouseEnter: " + data.TextValue);
}
var myText = (TextBlock)item.FindName("myText");
if (myText is TextBlock)
{
Point relativePoint = myText.TransformToAncestor(supergrid)
.Transform(new Point(0, 0));
Debug.WriteLine("relativePoint: " + relativePoint.ToString());
//update left button position
double w = button1.ActualWidth;
double h = button1.ActualHeight;
double x = relativePoint.X - w / 2.0 - myText.Margin.Left;
double y = relativePoint.Y;
updateMargin(HitTestBorder1,
x,
x + w,
y + h,
y);
//update right button position
w = button2.ActualWidth;
h = button2.ActualHeight;
x = relativePoint.X - w / 2.0 - myText.Margin.Left;
x += item.ActualWidth;
y = relativePoint.Y;
updateMargin(HitTestBorder2,
x,
x + w,
y + h,
y);
//show the button
button1.Visibility = button2.Visibility = Visibility.Visible;
//the current item
if (myText.DataContext is DataModel dm)
{
this.currentDataModel = dm;
}
}
}
}
private void updateMargin(Border border, double left, double right, double bottom, double top)
{
//border = HitTestBorder2;
var margin = border.Margin;
margin.Left = left;
margin.Right = right;
margin.Top = top;
margin.Bottom = bottom;
border.Margin = margin;
Debug.WriteLine("updateMargin Left: " + left.ToString() + "Right: " + right.ToString());
}
private void myElement_MouseLeave(object sender, MouseEventArgs e)
{
//change button visibility
if (sender is Grid item)
{
if (item.DataContext is DataModel data)
{
System.Diagnostics.Debug.WriteLine("myElement_MouseLeave: " + data.TextValue);
}
//button1.Visibility = button2.Visibility = Visibility.Hidden;
}
}
private void HorizontalListBox_MouseLeave(object sender, MouseEventArgs e)
{
Debug.WriteLine("HorizontalListBox_MouseLeave");
//button1.Visibility = button2.Visibility = Visibility.Hidden;
}
private void supergrid_MouseLeave(object sender, MouseEventArgs e)
{
Debug.WriteLine("supergrid_MouseLeave: ");
button1.Visibility = button2.Visibility = Visibility.Hidden;
// => :D
}
private void button1_Click(object sender, RoutedEventArgs e)
{
Debug.WriteLine("LEFT INSERT");
int idx = this.DataModels.IndexOf(currentDataModel);
DataModel newDataModel = new DataModel($"Item{this.DataModels.Count}");
this.DataModels.Insert(idx, newDataModel);
button1.Visibility = button2.Visibility = Visibility.Hidden;
}
private void button2_Click(object sender, RoutedEventArgs e)
{
Debug.WriteLine("RIGHT INSERT");
int idx = this.DataModels.IndexOf(currentDataModel);
this.DataModels.Insert(idx+1, new DataModel($"Item{this.DataModels.Count}"));
button1.Visibility = button2.Visibility = Visibility.Hidden;
}
}
public class DataModel
{
public string TextValue { get; set; }
public DataModel(string textValue)
{
this.TextValue = textValue;
}
}
As you can see, there is place for improvements (like select the new ListBoxItem). Disable the buttons when we drag, animation, delay, etc.

How to get text from ButtonContent with Grid in it

i want to get in my codebehind the Content of an button that has a grid in it with multiple textboxes.
i had this before Code and this works:
XAML:
<Button Click="btnClick_upload_Data">
<Button.Content>
<StackPanel Orientation="Horizontal">
<TextBlock Text="test1" ></TextBlock>
<TextBlock Text="test2" ></TextBlock>
</StackPanel>
</Button.Content>
</Button>
codebehind:
private void btnClick_upload_Data(object sender, RoutedEventArgs e)
{
string s = ((((sender as Button).Content) as StackPanel).Children[1] as TextBlock).Text;
//…
and this way i got the "test2" im my string variable.
now my XAML has changed a bit
my Question is how do i have to Change my function so i still get "test2" in my string variable 's'
new XAML:
<Button Click="btnClick_upload_Data" >
<Button.Content>
<StackPanel Orientation="Horizontal">
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Text="test1" Grid.Row="0"></TextBlock>
<TextBlock Text="test2" Grid.Row="1"></TextBlock>
</Grid>
</StackPanel>
</Button.Content>
</Button>
new XAML:
private void btnClick_upload_Data(object sender, RoutedEventArgs e)
{
//????
thanks in advance

Try this:
private void btnClick_upload_Data(object sender, RoutedEventArgs e)
{
string s = null;
Button btn = (Button)sender;
StackPanel sp = btn.Content as StackPanel;
if (sp != null && sp.Children.Count > 0)
{
Grid grid = sp.Children[0] as Grid;
if (grid != null && grid.Children.Count > 1)
{
TextBlock textBlock = grid.Children[1] as TextBlock;
if (textBlock != null)
s = textBlock.Text;
}
}
MessageBox.Show(s);
}

WPF. How to add text under image in c#

I have image which I set behind code and now I have to set 3 texts under the picture also behind code, maybe somenoe knoe how to make it?
my xaml:
...<Style x:Key="imageStyle" TargetType="{x:Type Image}">
<Setter Property="Height" Value="152px"/>
<Setter Property="Width" Value="762"/>
</Style>
</windows.Resources>
<Grid>
<StackPanel x:Name="StackStyle" Background="#FFFFFF" Margin="30,98,250,150">...
My xaml.cs is:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.Loaded += OnLoaded;
}
private void OnLoaded(object sender, RoutedEventArgs routedEventArgs)
{
Style imgStyle = (Style)Resources["imageStyle"];
var imag = new Image();
imag.Style = imgStyle;
string path = System.AppDomain.CurrentDomain.BaseDirectory + "../../ico.choose-coupon.png";
imag.Source = new BitmapImage(new Uri(path));
StackStyle.Children.Add(imag);
}
}
do not forget that this is one image, and these text have to be under Gray field.
UPDATE:
I get what I want, thats the code:
xaml:
<Viewbox Stretch="Fill">
<Grid>
<StackPanel Orientation="Vertical" x:Name="myStackPanel" Background="#FFFFFF" Height="560" Width="968" HorizontalAlignment="Center" >
<Label Style="{StaticResource Label}" ></Label>
</StackPanel>
</Grid>
</Viewbox>
xaml.cs:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.Loaded += OnLoaded;
}
private void OnLoaded(object sender, RoutedEventArgs routedEventArgs)
{
string path = System.AppDomain.CurrentDomain.BaseDirectory + "../../ico.choose-coupon.png";
Style imgStyle = (Style)Resources["imageStyle"];
var imag = new Image();
imag.Style = imgStyle;
imag.Source = new BitmapImage(new Uri(path));
myStackPanel.Children.Add(imag);
Style textStyle = (Style) Resources["textStyle"];
var text1 = new TextBlock();
var text2 = new TextBlock();
var text3 = new TextBlock();
text1.Style = textStyle;
text2.Style = textStyle;
text3.Style = textStyle;
text1.Text = "% coupon";
text2.Text = "Tara receipt";
text3.Text = "Value coupon";
text1.Margin = new Thickness(135,22,0,0);
text2.Margin = new Thickness(210, 22, 0, 0);
text3.Margin = new Thickness(188, 22, 0, 0);
var TextPanel = new StackPanel();
TextPanel.Orientation = Orientation.Horizontal;
TextPanel.Children.Add(text1);
TextPanel.Children.Add(text2);
TextPanel.Children.Add(text3);
myStackPanel.Children.Add(TextPanel);
}
}

You can use a button style. For the Text and the Image you can set an binding to the propertys. Maybe you write an Style for the button so that looks like in your example.
<Button>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Source}">
<Label Padding="0" Text="{Binding YourText}"></Label>
</StackPanel>
</Button>

Here is an exmaple of simple UserControl:
Add new userControl template to your project.
I am attaching an example of userControl with TextBox and TextBlock:
<UserControl
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"
mc:Ignorable="d"
x:Class="WpfApplication1.Example"
x:Name="UserControl"
d:DesignWidth="640" d:DesignHeight="480" Width="40" Height="40">
<Grid x:Name="LayoutRoot" Width="40" Height="40" Background="White">
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Test " VerticalAlignment="Top" Height="14.32"/>
<TextBox HorizontalAlignment="Left" Height="23" Margin="0,17,0,0" TextWrapping="Wrap" Text="Text" VerticalAlignment="Top" Width="40"/>
</Grid>
</UserControl>
Then in your window, just call to your userControl as much as you want(You can pass objects to it too):
<local:Example HorizontalAlignment="Left" Margin="16.4,22.4,0,0" VerticalAlignment="Top"/>
<local:Example HorizontalAlignment="Left" Margin="16.4,22.4,0,0" VerticalAlignment="Top"/>
<local:Example HorizontalAlignment="Left" Margin="16.4,22.4,0,0" VerticalAlignment="Top"/>

How to expand map in a grid in C#?

xaml
<Grid x:Name="LayoutRoot">
<maps:Map x:Name="mapWithMyLocation" HorizontalAlignment="Left" Margin="1,0,0,443" VerticalAlignment="Bottom" Height="233" Width="479" ZoomLevel="10"/>
<Grid Margin="0,0,0,77" Grid.Row="1" RenderTransformOrigin="0.5,0.5" Height="366" VerticalAlignment="Bottom" Grid.ColumnSpan="2">
<phone:LongListSelector x:Name="closestBusList" ItemsSource="{Binding KioskList}" SelectionChanged="closestBusList_SelectionChanged_1" Height="366" VerticalAlignment="Top">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Opacity="0.5" Background="WhiteSmoke">
<TextBlock FontWeight="Bold" Foreground="#0145A6" FontSize="14" x:Name="owner" Text="{Binding owner}"></TextBlock>
<TextBlock FontWeight="Bold" Foreground="#038edf" FontSize="12" x:Name="addres" Text="{Binding address}"></TextBlock>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</Grid>
</Grid>
cs
private void expand_btn_Click(object sender, RoutedEventArgs e)
{
double height = this.mapWithMyLocation.Height;
double from, to;
// animate from 150 to 800, or vice versa
if (height == 233)
{
from = 233;
to = 800;
closestBusList.Visibility = Visibility.Collapsed;
}
else
{
from = 800;
to = 233;
closestBusList.Visibility = Visibility.Visible;
}
Storyboard sb = new System.Windows.Media.Animation.Storyboard();
DoubleAnimation fillHeightAnimation = new System.Windows.Media.Animation.DoubleAnimation();
fillHeightAnimation.From = from;
fillHeightAnimation.To = to;
fillHeightAnimation.Duration = new Duration(TimeSpan.FromSeconds(0.3));
Storyboard.SetTarget(fillHeightAnimation, this.mapWithMyLocation);
Storyboard.SetTargetProperty(fillHeightAnimation, new PropertyPath("Height"));
sb.Children.Add(fillHeightAnimation);
sb.Begin();
}

After adding three row definitions and adding the map inside grid, the problem solved.

How to place canvas with drawings inside certain column of a ListView control?

How to place canvas with drawings inside certain column of a ListView control ?
I have this:
<DataTemplate>
<Canvas Width="60" Height="20" Background="Red" ClipToBounds="True" >
<ContentPresenter Content="{Binding Path=Graph}" />
</Canvas>
</DataTemplate>
and:
var canvas = new Canvas();
canvas.Children.Add(new Ellipse(){});
var items = new ObservableCollection<LvItem>() { new LvItem(){ Graph = canvas} };
myListView.ItemsSource = items;
but it shows System.Windows.Controls.Canvas as a text, and not the canvas itself with its drawings.

It's working, check example below.
XAML:
<ListView Name="myListView" >
<ListView.View>
<GridView>
<GridViewColumn Width="140" Header="Grap">
<GridViewColumn.CellTemplate>
<DataTemplate>
<Canvas Width="60" Height="50" Background="Red" ClipToBounds="True" >
<ContentPresenter Content="{Binding Path=Graph}" />
</Canvas>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
LvItem class:
class LvItem
{
public Canvas Graph { get; set; }
}
Code-behind:
var canvas = new Canvas();
canvas.Children.Add(new Ellipse() { Width = 50, Height = 50, Fill = new SolidColorBrush(Colors.Yellow) });
var canvas2 = new Canvas();
canvas2.Children.Add(new Ellipse() { Width = 50, Height = 50, Fill = new SolidColorBrush(Colors.Blue) });
var items = new ObservableCollection<LvItem>() { new LvItem() { Graph = canvas }, new LvItem() { Graph = canvas2 } };
myListView.ItemsSource = items;
Result: