We Keep Coding

Create and run a new progress every click on addTabItem and Start Button

I'm trying to create and start a new progressBar every click action on button start that exist in the new TabItem ( after clicking on the "+") , so the goal is to run multiple progressBar in the same time , these progressBar will be created on each new Tab Item , and will run when clicking on Start Button of ( each tab ) , so each tab item will have a Button and a progressBar .
How can I do this?
MainWindow.xaml.cs
private List<TabItem> _tabItems;
private TabItem _tabAdd;
ProgressBar pr;
public MainWindow()
{
try
{
InitializeComponent();
// initialize tabItem array
_tabItems = new List<TabItem>();
// add a tabItem with + in header
_tabAdd = new TabItem();
_tabAdd.Header = "+";
// tabAdd.MouseLeftButtonUp += new MouseButtonEventHandler(tabAdd_MouseLeftButtonUp);
_tabItems.Add(_tabAdd);
// add first tab
this.AddTabItem();
// bind tab control
tabDynamic.DataContext = _tabItems;
tabDynamic.SelectedIndex = 0;
}
catch (Exception ex)
{
MessageBox.Show(ex.Message);
}
}
private TabItem AddTabItem()
{
int count = _tabItems.Count;
pr = new ProgressBar();
pr.Width = 150;
pr.Height = 30;
// create new tab item
TabItem tab = new TabItem();
tab.Header = string.Format("Tab {0}", count);
tab.Name = string.Format("tab{0}", count);
tab.HeaderTemplate = tabDynamic.FindResource("TabHeader") as DataTemplate;
tab.MouseDoubleClick += new MouseButtonEventHandler(tab_MouseDoubleClick);
// add controls to tab item, this case I added just a textbox
StackPanel st = new StackPanel();
st.Width = 350;
st.Height = 350;
Button btn = new Button();
btn.Width = 150;
btn.Height = 30;
st.HorizontalAlignment = HorizontalAlignment.Center;
st.VerticalAlignment = VerticalAlignment.Center;
btn.Name = "txt";
btn.Content = "Start";
btn.Click += Btn_Click;
Border b = new Border();
b.BorderBrush = Brushes.Transparent;
b.BorderThickness = new Thickness(0, 0, 0, 10);
st.Children.Add(btn);
st.Children.Add(b);
st.Children.Add(pr);
st.Orientation = Orientation.Vertical;
tab.Content = st;
// insert tab item right before the last (+) tab item
_tabItems.Insert(count - 1, tab);
return tab;
}
private async void Btn_Click(object sender, RoutedEventArgs e)
{
await Task.Run(async () =>
{
this.Dispatcher.Invoke(new Action(async () => {
var progress = new Progress<int>(percent =>
{
pr.Value = percent;
});
pr.Value = 1;
int value = 90000;
await Task.Run(() => DoSomeWork(value, progress));
}), DispatcherPriority.ContextIdle);
});
}
public async Task DoSomeWork(int iterations, IProgress<int> progress)
{
int s = 0;
for (int i = 0; i < iterations; i++)
{
await Task.Run(() => {
s *= s * i;
progress.Report(i * 100 / iterations);
});
};
}
private void tabAdd_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
// clear tab control binding
tabDynamic.DataContext = null;
TabItem tab = this.AddTabItem();
// bind tab control
tabDynamic.DataContext = _tabItems;
// select newly added tab item
tabDynamic.SelectedItem = tab;
}
private void tab_MouseDoubleClick(object sender, MouseButtonEventArgs e)
{
TabItem tab = sender as TabItem;
TabProperty dlg = new TabProperty();
// get existing header text
dlg.txtTitle.Text = tab.Header.ToString();
if (dlg.ShowDialog() == true)
{
// change header text
tab.Header = dlg.txtTitle.Text.Trim();
}
}
private void tabDynamic_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
TabItem tab = tabDynamic.SelectedItem as TabItem;
if (tab == null) return;
if (tab.Equals(_tabAdd))
{
// clear tab control binding
tabDynamic.DataContext = null;
TabItem newTab = this.AddTabItem();
// bind tab control
tabDynamic.DataContext = _tabItems;
// select newly added tab item
tabDynamic.SelectedItem = newTab;
}
else
{
// your code here...
}
}
MainWindow.xaml
<Grid>
<TabControl Name="tabDynamic" ItemsSource="{Binding}" SelectionChanged="tabDynamic_SelectionChanged">
<TabControl.Resources>
<DataTemplate x:Key="TabHeader" DataType="TabItem">
<DockPanel>
<Button Name="btnDelete" DockPanel.Dock="Right" Margin="5,0,0,0" Padding="0" Click="btnDelete_Click" CommandParameter="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem}}, Path=Name}">
</Button>
<TextBlock Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem}}, Path=Header}" />
</DockPanel>
</DataTemplate>
<Style TargetType="TextBox">
<Setter Property="VerticalAlignment" Value="Stretch"></Setter>
<Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
<Setter Property="AcceptsReturn" Value="True"></Setter>
<Setter Property="TextWrapping" Value="WrapWithOverflow"></Setter>
<Setter Property="MaxLines" Value="5000"></Setter>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"></Setter>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"></Setter>
</Style>
</TabControl.Resources>
</TabControl>
</Grid>
TabProperty.xaml
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60px"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="Label">
<Setter Property="HorizontalAlignment" Value="Right"></Setter>
</Style>
</Grid.Resources>
<Label Content="Tab Title:" Grid.Row="0" Grid.Column="0" Height="25" />
<TextBox Name="txtTitle" Grid.Row="0" Grid.Column="1" Height="25" />
<StackPanel Grid.Row="1" Grid.ColumnSpan="2" Orientation="Horizontal">
<Button Content="OK" Name="btnOK" IsDefault="True" Height="23" Click="btnOK_Click"></Button>
<Button Content="Cancel" Name="btnCancel" IsCancel="True" Height="23"></Button>
</StackPanel>
</Grid>
TabProperty.xaml.cs
public partial class TabProperty : Window
{
public TabProperty()
{
InitializeComponent();
}
private void btnOK_Click(object sender, RoutedEventArgs e)
{
this.DialogResult = true;
}
}

I need to Delete a Control inside a WrapPanel created dynamically inside another WrapPanel while in Run-Time

So, I have a main WrapPanel called "valoresPanel". When I start running I need to click the Button labeled "2" (below) and a TextBox needs to appear inside the WrapPanel labeled "1" thats was created in runtime.
This is my code for the "+ button" right now:
void novoValor_Click(object sender, RoutedEventArgs e)
{
WrapPanel wpValores = new WrapPanel();
Button deleteValor = new Button();
TextBox txtValor = new TextBox();
deleteValor.Height = 25;
deleteValor.Width = 25;
deleteValor.Content = "X";
txtValor.Height = 25;
txtValor.Width = 70;
txtValor.Margin = new Thickness(0, 0, 8, 0);
wpValores.Height = 25;
wpValores.Width = 105;
wpValores.Children.Add(deleteValor);
wpValores.Children.Add(txtValor);
valoresPanel.Children.Add(wpValores);
deleteValor.Click += deleteValor2_Click;
}
So, i updated my code using only one WrapPanel per item, now i can add a item, add values and delete the item with its respective values but i cant delete a specific value, this is my code by now:
this image will help to understand
void novoValor_Click(object sender, RoutedEventArgs e)
{
Button btn = sender as Button;
WrapPanel wpFather = btn.Parent as WrapPanel;
WrapPanel wpValue = new WrapPanel();
Button deleteValue = new Button();
TextBox txtValue = new TextBox();
wpValue.Height = 25;
wpValue.Width = 105;
deleteValue.Height = 25;
deleteValue.Width = 25;
deleteValue.Content = "-";
txtValue.Height = 25;
txtValue.Width = 70;
txtValue.Margin = new Thickness(0, 0, 8, 0);
wpValue.Children.Add(deleteValue);
wpValue.Children.Add(txtValue);
wpFather.Children.Add(wpValue);
deleteValue.Click += deleteValor_Click;
}
void deleteValor_Click(object sender, RoutedEventArgs e)
{
Button btn = sender as Button;
WrapPanel panel = btn.Parent as WrapPanel;
entradasPanel.Children.Remove(panel);
}
If someone need any other information im willing to send it as fast as I can!

You should create a ListView which has a WrapPanel as ItemsPanel. Then to the ListView.ItemsSource you bind an ObservableCollection of data models. By defining a DataTemplate for the ListView.ItemTemplate you can make the data items be displayed as a TextBox with a Button where the TextBox binds to this item's data model. By pressing the delete button you simply remove this data model from the ObservaleColection ( the ItemsSource of the ListView).
DataModel.cs
class DataModel
{
public string UserInput { get; set; }
}
ViewModel.cs
class ViewModel
{
public ObservableCollection<DataModel> Items { get; set; }
public ICommand AddItemCommand => new AsyncRelayCommand(() => this.Items.Add(new DataModel()));
public ICommand RemoveItemCommand => new AsyncRelayCommand((item) => this.Items.Remove(item));
public ViewModel()
{
this.Items = new ObservableCollection<DataModel>();
}
}
MainWindow.xaml
<Window>
<Window.DataContext>
<ViewModel />
</Window.DataContext>
<StackPanel>
<Button Content="Add Item"
Command="{Binding AddItemCommand}" />
<ListView ItemsSource="{Binding Items}">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Width="600" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate DataType="{x:Type DataModel}">
<StackPanel Orientation="Horizontal">
<Button Content="Remove Item"
Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ListView}, Path=DataContext.RemoveItemCommand}"
CommandParameter="{Binding}" />
<TextBox Text="{Binding UserInput}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</Window>

I could solve my last question with the following code:
void deleteValue_Click(object sender, RoutedEventArgs e)
{
Button btn = sender as Button;
WrapPanel panel = btn.Parent as WrapPanel;
WrapPanel panelPai = panel.Parent as WrapPanel;
panelPai.Children.Remove(panel);
}

Grid is getting smaller after pressing "AddLexemesFromFolder" button

I develop one-page app. This is XAML of MainPage
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" Grid.Row="0">
<AppBar x:Name="MenuAppBar" IsOpen="True">
<StackPanel Orientation="Horizontal">
<AppBarButton Icon="Add" Label="Добавить лексемы" Name="AddLexemesFromFolder" Click="OpenFolderAndGetLexemes_Click" HorizontalAlignment="Left"/>
<AppBarButton Icon="Save" Label="Сохранить лексемы" Name="SaveLexemes" Click="SaveLexemes_Click" HorizontalAlignment="Left"/>
</StackPanel>
</AppBar>
</StackPanel>
<ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto" VerticalScrollMode="Enabled">
<Grid x:Name="GridLexemesViewer" HorizontalAlignment="Stretch"/>
</ScrollViewer>
</Grid>
When I pressed "AddLexemesFromFolder" button more than two times, GridLexemesViewer is getting smaller over and over.
This is OpenFolderAndGetLexemes code
private async void OpenFolderAndGetLexemes_Click(object sender, RoutedEventArgs routedEventArgs)
{
await StartSaveLexemes();
var folderPicker = new Windows.Storage.Pickers.FolderPicker();
folderPicker.FileTypeFilter.Add("*");
Windows.Storage.StorageFolder folder = await folderPicker.PickSingleFolderAsync();
if (folder != null)
{
StorageApplicationPermissions.FutureAccessList.AddOrReplace("PickedFolderToken", folder);
await Task.Run(() => StartNewSessionForGetLexemes(folder.Path));
InitializeGrid();
}
}
I use "InitializeGrid" method for clear Children in GridLexemesViewer, use CreateRowsAndColumns and put TextBox with content to GridLexemesViewer.
This is code of InitializeGrid and CreateRowsAndColumns()
private void InitializeGrid()
{
GridLexemesViewer.Children.Clear();
CreateRowsAndColumns();
int index = 1;
foreach (var lexem in CurrentSession.Lexemes)
{
foreach (var item in lexem.Value)
{
Binding binding = new Binding
{
Source = item,
Path = new PropertyPath("Value"),
Mode = BindingMode.TwoWay,
UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged
};
TextBox textBox = new TextBox { TextWrapping = TextWrapping.Wrap };
BindingOperations.SetBinding(textBox, TextBox.TextProperty, binding);
GridLexemesViewer.Children.Add(textBox);
Grid.SetColumn(textBox, CurrentSession.Languages.IndexOf(item.Language) + 1);
Grid.SetRow(textBox, index);
}
index++;
}
}
private void CreateRowsAndColumns()
{
int indexRow = 1;
int indexColumn = 1;
RowDefinition firstRowDefinition = new RowDefinition();
ColumnDefinition firstColumnDefinition = new ColumnDefinition { Width = GridLength.Auto };
GridLexemesViewer.ColumnDefinitions.Add(firstColumnDefinition);
GridLexemesViewer.RowDefinitions.Add(firstRowDefinition);
foreach (var key in CurrentSession.Lexemes.Keys)
{
RowDefinition rowDefinition = new RowDefinition();
GridLexemesViewer.RowDefinitions.Add(rowDefinition);
TextBlock textBlock = new TextBlock{Text = key};
GridLexemesViewer.Children.Add(textBlock);
Grid.SetRow(textBlock, indexRow);
indexRow++;
}
foreach (var language in CurrentSession.Languages)
{
ColumnDefinition columnDefinition = new ColumnDefinition { Width = new GridLength(1.0, GridUnitType.Star)};
GridLexemesViewer.ColumnDefinitions.Add(columnDefinition);
TextBlock textBlock = new TextBlock {Text = language};
GridLexemesViewer.Children.Add(textBlock);
Grid.SetRow(textBlock, 0);
Grid.SetColumn(textBlock, indexColumn);
indexColumn++;
}
}
This GIF shows how to reproduce bug

The problem is that you are calling CreateRowsAndColumns() each time but not removing the Rows and Columns from previous run. Using Grid.Clear() only deletes the children controls in the Grid, but the Grid.RowDefinitions and Grid.ColumnDefinitions stay intact.
To fix this, clear both definitions at the start of CreateRowsAndColumns():
GridLexemesViewer.RowDefinitions.Clear();
GridLexemesViewer.ColumnDefinitions.Clear();
However, definitely consider using the DataGrid control from the Windows Community Toolkit as it should have all the features you need and has better maintainability and performance then a custom Grid, especially for bigger data.

How to remove a DropShadowEffect in code?

I have a method which draws lines in a canvas like this:
public void drawoncanvas(double[] coord, string fullkey)
{
myLine = new Line();
myLine.X1 = coord[0];
myLine.X2 = coord[2];
myLine.Y1 = coord[1];
myLine.Y2 = coord[3];
MainWindow.mycanvas.Children.Add(myLine);
myLine.MouseEnter += mymouse; //add MousEnter Event
myLine.MouseLeave += mymouseleave; //add MouseLeave Event
}
The MouseEnter Event then adds a DropShadowEffect to the line that triggers the event:
public void mymouse(object sender, MouseEventArgs e)
{
Line thisline = sender as Line;
thisline.Effect = new DropShadowEffect{Color = new Color { A = 255, R = 255, G = 255, B = 0 }, Direction = 320,ShadowDepth = 0, Opacity = 1};
}
This works fine. But now I want to remove this effect as soon as the mouse cursor is not anymore over the line:
public void mymouseleave(object sender, MouseEventArgs e)
{
Line thisline = sender as Line;
thisline.Effect = null; //this doesn't do anything
}
I know this is a is probably a really simple question but I couldn't find any solution so far.
EDIT:
Ok I found what causes the problem, still don't know a solution though: I don't only create the dropshadow in the MouseEnter event but also display a tootltip, so my full Code is actually:
public void drawoncanvas(double[] coord, string fullkey)
{
myLine = new Line();
myLine.Stroke = Brushes.Red;
myLine.X1 = coord[0];
myLine.X2 = coord[2];
myLine.Y1 = coord[1];
myLine.Y2 = coord[3];
myLine.Tag = fullkey;
MainWindow.mycanvas.Children.Add(myLine);
myLine.MouseEnter += mymouse;
myLine.MouseLeave += mymouseleave;
}
ToolTip tt = new ToolTip();
public void mymouse(object sender, MouseEventArgs e)
{
Line thisline = sender as Line;
string data = Convert.ToString(thisline.Tag);
string[] splitdata = data.Split('/');
tt.Content = String.Concat(splitdata[0], " -> ", splitdata[3] ,"kt -> ", splitdata[1]);
tt.StaysOpen = false;
tt.IsOpen = true; //the removing of the shadow on MouseLeave works when I comment this line out
thisline.Effect = new DropShadowEffect{Color = new Color { A = 255, R = 255, G = 255, B = 0 }, Direction = 320,ShadowDepth = 0, Opacity = 1};
}
public void mymouseleave(object sender, MouseEventArgs e)
{
Line thisline = sender as Line;
tt.IsOpen = false;
thisline.Effect = null;
}
If I simply comment out the tt.IsOpen = true; and do not display the tooltip it all works fine.....I'm really confused.
EDIT 2:
Here the XAML:
<Window x:Class="mapO1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:mapO1"
Title="mapO1" Height="600" Width="750" WindowStartupLocation="CenterScreen" SizeChanged="MainWindow_SizeChanged">
<Grid>
<Grid x:Name="mygrid">
<local:ZoomBorder x:Name="border" ClipToBounds="True" Background="Black">
<Grid Name="maingrid">
<Image Name="image1" />
<Canvas Name="mycanvas" HorizontalAlignment="Left" VerticalAlignment="Top" ClipToBounds="False"/>
</Grid>
</local:ZoomBorder>
<Button x:Name="button1" Content="Fullscreen on/off" HorizontalAlignment="Right" Height="18" Margin="0,20,50,0" VerticalAlignment="Top" Opacity="0.5" Width="108" FontWeight="Bold" Click="button1_Click"/>
<ComboBox x:Name="comboBox1" Height="24" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150" Margin="10,20,0,0" Opacity="0.5" FontWeight="Bold" Text="Select Period" SelectionChanged="comboBox1_SelectionChanged"/>
<ComboBox x:Name="comboBox2" Height="24" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150" Margin="10,60,0,0" FontWeight="Bold" Opacity="0.5" Text="Select Stream" DropDownClosed="comboBox2_DropDownClosed"/>
</Grid>
</Grid>
</Window>

Dynamically created TextBox Name and Position Issue

I have completed the questions i have asked, Thanks to everyone who answered.
At the moment in my application I have a two buttons which can create my TextBoxs and put them into the position I want them to go.
C# Code:
private void btnAddTitle_Click(object sender, RoutedEventArgs e)
{
TextBox x = new TextBox();
x.Name = "new_textbox";
x.TextWrapping = TextWrapping.Wrap;
x.Height = 25;
x.Width = 200;
x.AcceptsReturn = true;
x.Margin = new Thickness(10, 15, 950, 0);
spStandard.Children.Add(x);
}
private void btnQuestion_Click(object sender, RoutedEventArgs e)
{
TextBox x = new TextBox();
x.Name = "new_textbox";
x.TextWrapping = TextWrapping.Wrap;
x.Height = 25;
x.Width = 200;
x.AcceptsReturn = true;
x.Margin = new Thickness(10, 15, 850, 0);
spStandard.Children.Add(x);
}
XAML Code:
<Button x:Name="btnAddTitle" Content="Add Title" HorizontalAlignment="Left" Margin="919,30,0,0" VerticalAlignment="Top" Width="121" Height="24" Background="{x:Null}" Click="btnAddTitle_Click"/>
<Button x:Name="btnQuestion" Content="Add Question" HorizontalAlignment="Left" Margin="1080,30,0,0" VerticalAlignment="Top" Width="121" Height="24" Click="btnQuestion_Click"/>
<Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="1" Margin="22,82,0,0" Stroke="Black" VerticalAlignment="Top" Width="1200"/>
<Border CornerRadius="6" BorderBrush="Black" BorderThickness="2" Margin="34,132,33,72">
<StackPanel x:Name="spStandard" HorizontalAlignment="Left" Margin="0,-2,-2,-2" Width="1181"/>
</Border>
Picture of the code in action:
http://i.stack.imgur.com/REWTe.png
(The Title TextBoxs are closer to the border and the question TextBoxs have a gap)
ANSWERED My first question is: When I click the button and it Dynamically creates the different TextBoxs. How can I give them different Names/ID's so I can get the information out of that TextBox later on when I need it?
My last question is: When I edit the width of the TextBox (x.Width = 200;) so that the user can add a bigger question, the TextBox losses position and also the margin.
Picture:
http://i.stack.imgur.com/JKhUH.png
(It seems to lose the margin and also cut of the edge of the TextBox when I make bigger)

For the first question you can generate text box name dynamically.
int y = 0;
private void btnAddTitle_Click(object sender, RoutedEventArgs e)
{
TextBox x = new TextBox();
x.Name = "new_textbox" + y;
x.TextWrapping = TextWrapping.Wrap;
x.Height = 25;
x.Width = 200;
x.AcceptsReturn = true;
x.Margin = new Thickness(10, 15, 950, 0);
spStandard.Children.Add(x);
y++;
}