WPF - Delete selected item (BitmapImage) from listview - wpf

I have a Listview and for it's ItemsSource I have set CollectionOfCapturedImages (an ObservableCollection) ,an a Button for deleting selected items (BitmapImage) from Listview and also from ObservableCollection and a Label in my MainWindow displaying amount of captured images.
private void addNewImageButton_Click(object sender, RoutedEventArgs e)
{
CameraWindow cWindow = Application.Current.Windows.OfType<CameraWindow>().FirstOrDefault();
RoutedEventArgs newEventArgs = new RoutedEventArgs(Button.ClickEvent);
cWindow.manualCapture.RaiseEvent(newEventArgs);
// ListView.ScrollIntoView(ListView.Items.Count - 1);
}
public ObservableCollection<BitmapImage> CollectionOfCapturedImages { get; } = new ObservableCollection<BitmapImage>();
<ListView x:Name="ListView" ItemsSource="{Binding CollectionOfCapturedImages}" Height="345" Margin="567,10,10,0" VerticalAlignment="Top">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="1" HorizontalAlignment="Center" VerticalAlignment="Top"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Image Source="{Binding}" Height="150" Width="150"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
this is how I'm updating my Label in MainWindow. When I'm capturing images there is no problem, Label's content is getting updated.
public Action<int> amountOfCapturedImages;
this.cameraWindow = new CameraWindow(this);
cameraWindow.amountOfCapturedImages += (int count) => {
MwAmountOfImagesLabel.Content = count;
};
and here is my delete button
<Button x:Name="DeleteSelectedImageButton" Click="DeleteSelectedImageButton_Click" Content="Delete Selected Image" HorizontalAlignment="Left" Margin="567,488,0,0" Height="26" VerticalAlignment="Top" Width="145"/>
and this way I'm deleting BitmapImages from Listview
private void DeleteSelectedImageButton_Click(object sender, RoutedEventArgs e)
{
CollectionOfCapturedImages.Remove((BitmapImage)ListView.SelectedItem);
}
but my Label's content is not getting updated when I delete an image from Listview. How could I correctly update my Label's content?

You must remove them from the CollectionOfCapturedImages and bind MwAmountOfImagesLabel => CollectionOfCapturedImages.Count

Get rid of this code:
cameraWindow.amountOfCapturedImages += (int count) => {
MwAmountOfImagesLabel.Content = count;
};
...and simply bind the Content property of the Label the Count property of the ObservableCollection:
<Label Content="{Binding CollectionOfCapturedImages.Count}" />
You should not set the Content property of the Label programmatically somewhere in your code. Just set up the binding in your XAML markup.

Related

ItemContainerGenerator.ContainerFromItem method returns null if item has grouped

In WPF ListBox, I can get the selected item container using the method ItemContainerGenerator.ContainerFromItem(selectedItem) but it is not working when ListBoxItem is grouped.
MainWindow.xaml
<ListBox x:Name="listBox" ItemsSource="{Binding Contacts}" Loaded="cardView1_Loaded" SelectedIndex="0" Width="250" Height="250"
HorizontalAlignment="Center" VerticalAlignment="Center">
<ListBox.GroupStyle>
<GroupStyle/>
</ListBox.GroupStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Name}"/>
<TextBlock Text="{Binding Age}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
MainWindow.xaml.cs
In the loaded method, First I have called this method ItemContainerGenerator.ContainerFromItem(selectedItem) and it returns the container of the selected item because the Listbox item is not grouped. Then I have added grouping for Listbox item. Now, if i called this method it returns null.
public MainWindow()
{
InitializeComponent();
DataContext = new ViewModel();
}
private void cardView1_Loaded(object sender, RoutedEventArgs e)
{
withOutGroup.Text = withOutGroup.Text + listBox.ItemContainerGenerator.ContainerFromItem(listBox.SelectedItem);
ICollectionView collectionView = CollectionViewSource.GetDefaultView(listBox.ItemsSource);
collectionView.GroupDescriptions.Add(new PropertyGroupDescription("Name"));
withGroup.Text = withGroup.Text + listBox.ItemContainerGenerator.ContainerFromItem(listBox.SelectedItem);
}
Sample: ListBox-Testing-Project
How can I get the selected item container if the Listbox item is grouped?
You need to wait to call the ContainerFromItem method until the container has actually been created. This works:
private void cardView1_Loaded(object sender, RoutedEventArgs e)
{
ICollectionView collectionView = CollectionViewSource.GetDefaultView(listBox.ItemsSource);
collectionView.GroupDescriptions.Add(new PropertyGroupDescription("Name"));
Dispatcher.BeginInvoke(System.Windows.Threading.DispatcherPriority.Loaded,
new Action(() =>
{
var container = listBox.ItemContainerGenerator.ContainerFromItem(listBox.SelectedItem);
//...
}));
}

Silverlight HyperlinkButton styles in custom control

I have a strange styling problem that I cannot figure out.
What I want to achieve is that HyperlinkButtons in datagrid cells are styled with an underline when the mouse hovers the link.
I have one column where I declare the HyperlinkButton element in XAML like this:
<HyperlinkButton Style="{StaticResource HyperlinkButtonStyle}" DataContext="{Binding}" FontSize="11" Content="{Binding DguNr}" Click="DgunrHyperlinkButtonClick" />
This works fine - the link is styled as I want.
In another column, I need to display n number of HyperlinkButtons based on some information in the bound element. Hence I have created a usercontrol that will render 0..n Hyperlinkbuttons. The control is declared in XAML like this:
<sdk:DataGridTemplateColumn IsReadOnly="True" CanUserSort="True">
<sdk:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<bc:BoreholePlantGridColumn Plants="{Binding Plants, Mode=OneWay}" />
</DataTemplate>
</sdk:DataGridTemplateColumn.CellTemplate>
</sdk:DataGridTemplateColumn>
The code behind for the control looks like this:
public partial class BoreholePlantGridColumn : UserControl, INotifyPropertyChanged
{
public BoreholePlantGridColumn()
{
InitializeComponent();
Loaded += new RoutedEventHandler(BoreholePlantGridColumn_Loaded);
}
void BoreholePlantGridColumn_Loaded(object sender, RoutedEventArgs e)
{
var borehole = (SelectableBoring)this.DataContext;
foreach(var p in borehole.Plants)
{
// <HyperlinkButton HorizontalAlignment="Stretch" VerticalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" DataContext="{Binding}" Foreground="Black" FontSize="11" Content="{Binding DguNr}" Click="DgunrHyperlinkButtonClick" />
var button = new HyperlinkButton();
button.Content = p.PlantId;
button.Style = (Style)App.Current.Resources["HyperlinkButtonStyle"];
button.VerticalContentAlignment = VerticalAlignment.Center;
var url = String.Format(Common.Constants.Url.GeusPlantLinkTemplate, p.PlantId);
button.NavigateUri = new Uri(url, UriKind.RelativeOrAbsolute);
button.TargetName = "_blank";
LayoutRoot.Children.Add(button);
}
}
public event PropertyChangedEventHandler PropertyChanged;
public static readonly DependencyProperty PlantsProperty = DependencyProperty.Register("Value", typeof(Anlaeg), typeof(BoreholePlantGridColumn), new PropertyMetadata(new PropertyChangedCallback(ValueChanged)));
public IList<Anlaeg> Plants
{
get { return (IList<Anlaeg>)this.GetValue(PlantsProperty); }
set { this.SetValue(PlantsProperty, value); }
}
private static void ValueChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)
{
var myUC = (BoreholePlantGridColumn)obj;
var newValue = (IList<Anlaeg>)e.NewValue;
}
}
This works almost as expected; the linkbuttons(s) are rendered with the correct color - but there is not displayed an underline text when the mouse hovers the link.
I do not understand why the underline is displayed in the hyperlinkbutton that is declared directly in XAML but not in the hyperlink that is rendered in code-behind. Can someone please help me on this?
I have used the hyperlinkbutton styling from this thread:1
I just use the Following Code
<ListBox Grid.Column="1" ItemsSource="{Binding EncyclopediaList}" HorizontalContentAlignment ="Stretch" Margin="5,0" >
<ListBox.ItemTemplate>
<DataTemplate>
<HyperlinkButton Content="{Binding Name}" Foreground="Black" Command="{Binding ViewArticlePageCommand, Source={StaticResource EncyclopediaViewModel}}" CommandParameter="{Binding ServerEncyclopediaID}" FontFamily="Arial" FontSize="18" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
No need to Style the HyperlinkButton its Works perfectly in My Case Add the Underline and Make it bold when Mouse move over it.

How to change TabItem indices of a TabControl at runtime?

I have five TabItem's in my TabControl and I need to move the position of each tab continuously at runtime. Can anyone tell me how can I change tab index from one position to another position at runtime.
Thanks,
#nagaraju.
Use the below solution:
TabItem tempTab = new TabItem();
tempTab = control.Items[0] as TabItem;
control.Items[0] = control.Items[1];
control.Items[1] = tempTab;
This will definitely work and you have to do from code behind.
If you are using ObservableCollection the you Just have to change the position of the Item in your collection it will be refelected in View...
For Example..
<TabControl ContentTemplate="{StaticResource ResourceKey=listView}"
ItemContainerStyle="{StaticResource ResourceKey=myTabItem}"
ItemsSource="{Binding Path=Persons}"
SelectedItem="{Binding Path=SelectedPerson}"
Style="{StaticResource ResourceKey=myTab}"
TabStripPlacement="Bottom">
<TabControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Width="16"
Height="16"
Margin="0,0,2,0"
Source="Themes\Water lilies.jpg" />
<TextBlock Margin="0,4,0,0"
VerticalAlignment="Center"
FontWeight="Bold"
Text="{Binding Path=Name}" />
</StackPanel>
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
<Button Grid.Row="1" Width="50" Command="{Binding Path=ChangePositionCommand}"> ClickMe </Button>
Here you just Change the Position of the item in TabList in ViewModel and that Position will be changed accordingly...
In Your ViewModel
I have the implementation if getting Data and Setting Up Commands... that up to you how you Do it
public ICommand ChangePositionCommand { get; private set; }
public Person SelectedPerson
{
get { return selectedPerson; }
set
{
selectedPerson = value;
InvokePropertyChanged(new PropertyChangedEventArgs("SelectedPerson"));
}
}
private void ChangePosition(object obj)
{
int index = Persons.IndexOf(SelectedPerson);
if (index <= (Persons.Count-1))
{
Persons.Move(index,index+1);
}
else
{
Persons.Move(index,0);
}
}
The above code my give INdex out of bound but I am no where near an IDE so cant test that you could reapir it according to you.
You need to change the TabControl.Items Collection. Remove the tab from the old Position and set it on a new Positon.
See How to change the order of the TabItem in the wpf TabControl

Show and focus TextBox in DataTemplate

I have searched high and low, but I can't figure this one out. I am building a ListBox that has editable items. I have a DataTemplate for the ListBox.ItemTemplate that contains (among other things) a TextBlock and a TextBox. The TextBlock is always visible, and the TextBox is only visible after the user double-clicks on the TextBlock. When the user clicks another item in the list, the TextBox hides again to show the TextBlock. All of this works great. See my code:
XAML
<Window.Resources>
<local:GoalCollection x:Key="goals"/>
<DataTemplate x:Key="GoalItemTemplate" DataType="local:Goal">
<Grid>
<TextBlock Text="{Binding Title}"
MouseLeftButtonDown="TextBlock_MouseLeftButtonDown"
VerticalAlignment="Center"/>
<TextBox Name="EntryBox"
Text="{Binding Title}"
Visibility="Hidden"
BorderBrush="{x:Null}"
Padding="-2,0,0,0"
Panel.ZIndex="1"
Margin="-2,0,0,0"/>
</Grid>
</DataTemplate>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<ListBox Name="GoalsList"
ItemsSource="{Binding Source={StaticResource goals}}"
HorizontalContentAlignment="Stretch"
ItemTemplate="{StaticResource GoalItemTemplate}"
SelectionChanged="GoalsList_SelectionChanged" />
</Grid>
C#
public partial class MainWindow : Window
{
GoalCollection goals;
public MainWindow()
{
InitializeComponent();
}
private childItem FindVisualChild<childItem>(DependencyObject obj)
where childItem : DependencyObject { ... }
protected override void OnInitialized(EventArgs e)
{
base.OnInitialized(e);
goals = (GoalCollection)Resources["goals"];
}
private void TextBlock_MouseLeftButtonDown(object sender,
MouseButtonEventArgs e)
{
if (e.ClickCount == 2)
{
TextBlock tblk = sender as TextBlock;
if (tblk == null)
return;
TextBox tbx = ((Grid)tblk.Parent).FindName("EntryBox") as TextBox;
if (tbx == null)
return;
tbx.Visibility = Visibility.Visible;
Keyboard.Focus(tbx);
}
}
private void GoalsList_SelectionChanged(object sender,
SelectionChangedEventArgs e)
{
ListBoxItem lbi;
ContentPresenter cp;
DataTemplate dt;
TextBox tbx;
foreach (Goal item in e.RemovedItems)
{
lbi = (ListBoxItem)GoalsList.ItemContainerGenerator.
ContainerFromItem(item);
cp = FindVisualChild<ContentPresenter>(lbi);
dt = cp.ContentTemplate;
tbx = (TextBox)dt.FindName("EntryBox", cp);
if (tbx == null)
continue;
tbx.Visibility = Visibility.Hidden;
}
}
}
The problem that I'm having is that the TextBox immediately shifts focus back to the host ListBoxItem after the double-click. An additional (third) click is required to focus on the TextBox.
Tracing through this, I have found that the TextBox does indeed receive focus. But then it immediately loses it (try adding a handler for the TextBox.LostKeyboardFocus event and step through and out of the `TextBlock_MouseLeftButtonDown()' method). Any ideas?
Thanks.
My guess is that the click event is bubbling up to the ListBox and it's handling it by selecting the item.
Try adding this to your Click event handler (after Keyboard.Focus(tbx);)
e.Handled = true;
If you want to give focus to a child element, try the FocusManager.
<DataTemplate x:Key="MyDataTemplate" DataType="ListBoxItem">
<Grid>
<WrapPanel Orientation="Horizontal"
FocusManager.FocusedElement="{Binding ElementName=tbText}">
<CheckBox IsChecked="{Binding Path=Completed}" Margin="5" />
<Button Style="{StaticResource ResourceKey=DeleteButtonTemplate}"
Margin="5" Click="btnDeleteItem_Click" />
<TextBox Name="tbText"
Text="{Binding Path=Text}"
Width="200"
TextWrapping="Wrap"
AcceptsReturn="True"
Margin="5"
Focusable="True"/>
<DatePicker Text="{Binding Path=Date}" Margin="5"/>
</WrapPanel>
</Grid>
</DataTemplate>

wpf Usercontrol template

In my MVVM app I have a treeview representing records in a database. My views and viewmodels are linked in a resource dictionary like this
<DataTemplate DataType="{x:Type vm:TrialSiteViewModel}">
<vw:TrialSiteView />
</DataTemplate>
I want to display a preview of the view when a user hovers over an icon using the tooltip. My HierarchicalDataTemplate in the treeview is this
<HierarchicalDataTemplate DataType="{x:Type vm:TrialSiteViewModel}"
ItemsSource="{Binding Path=Children}">
...
<Button Style="{StaticResource previewButtonStyle}">
<Button.ToolTip>
<ToolTip Style="{x:Null}">
<ToolTip.ContentTemplate>
<DataTemplate>
<localtools:ObjectPreview
PreviewObject="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TreeViewItem}}, Path=DataContext}"
/>
</DataTemplate>
</ToolTip.ContentTemplate>
</ToolTip>
</Button.ToolTip>
</Button>
</StackPanel>
</HierarchicalDataTemplate>
This correctly picks up the TrialSiteViewModel that is the DataContext for the Treeviewitem.
ObjectPreview uses a viewbox and contentcontrol to display the view of the record
<Viewbox Grid.Row="1" Name="treeviewViewBox"
Stretch="Uniform"
IsEnabled="False">
<ContentControl Name="treeViewItemViewModel"
Content="{Binding PreviewObject}">
</ContentControl>
</Viewbox>
and the code behind contains the dependency property
public partial class ObjectPreview : UserControl
{
public ObjectPreview()
{
InitializeComponent();
}
public static readonly DependencyProperty _previewObjectProperty =
DependencyProperty.Register("PreviewObject", typeof(TreeViewItemViewModel), typeof(ObjectPreview));
public TreeViewItemViewModel PreviewObject
{
get { return (TreeViewItemViewModel)GetValue(_previewObjectProperty); }
set { SetValue(_previewObjectProperty, value); }
}
}
The problem I'm having is that the Template used to display the object is the same as that used in the treeview. This simply shows an icon and an object summary (ie. Primary Key and one or two key fields) rather than the entire template as defined in the view TrialSiteView. If I amend the code to use a button Command on the TrialSiteViewModel and inject it into ObjectPreview I can set the contentcontrol in the code behind and the TrialSiteView is used.
I'm guessing that somehow the Template is inferred from the TreeViewItem. Can anyone tell me how I can ensure the tooltip uses the TrialSiteView?
UPDATE
Ok, so I've fixed this but had to resort to code behind and removed the usercontrol and put the view directly in the tooltip. The key bit is getting the datatemplate from the resources. I'd tried to do this previously by assigning a key to the datatemplate, but either my code was flawed or it did not work. Anyhow, this works but is not the preferred Xaml solution.
private void PreviewObject_MouseEnter(object sender, MouseEventArgs e)
{
Image image = (Image)sender;
var key = new System.Windows.DataTemplateKey(image.DataContext.GetType());
var datatemplate = (DataTemplate)this.FindResource(key);
ToolTip tooltip = new ToolTip();
tooltip.Style = VisualUtils.GetResource<Style>("ControlTemplates.xaml", "toolTipWithContentStyle");
tooltip.MaxWidth = 460;
ContentControl contentcontrol = new ContentControl();
contentcontrol.ContentTemplate = datatemplate;
contentcontrol.Content = image.DataContext as TreeViewItemViewModel;
Viewbox viewbox = new Viewbox();
viewbox.Stretch = Stretch.Uniform;
viewbox.Child = contentcontrol;
tooltip.Content = viewbox;
image.ToolTip = tooltip;
}
What you need to do is to specify explicitly what data template to use. In order to do that just add a template property along with the PreviewObject property in the preview control:
public static readonly DependencyProperty _previewObjectTemplateProperty =
DependencyProperty.Register("PreviewObjectTemplate", typeof(DataTemplate), typeof(ObjectPreview));
public DataTemplate PreviewObjectTemplate
{
get { return (DataTemplate)GetValue(_previewObjectTemplateProperty); }
set { SetValue(_previewObjectTemplateProperty, value); }
}
Then, in the ObjectPreview.xaml add the ContentTemplate property that is bound to the PreviewObjectTemplate property:
<Viewbox Grid.Row="1" Name="treeviewViewBox"
Stretch="Uniform"
IsEnabled="False">
<ContentControl Name="treeViewItemViewModel"
Content="{Binding PreviewObject}"
ContentTemplate="{Binding PreviewObjectTemplate}" >
</ContentControl>
</Viewbox>
And finally, give a key to your data template and specify a reference to it explicitly when you declare ObjectPreview:
<DataTemplate x:Key="FullViewTemplate" DataType="{x:Type vm:TrialSiteViewModel}">
<vw:TrialSiteView />
</DataTemplate>
...
<ToolTip Style="{x:Null}">
<ToolTip.ContentTemplate>
<DataTemplate>
<localtools:ObjectPreview
PreviewObject="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TreeViewItem}}, Path=DataContext}"
PreviewObjectTemplate="{StaticResource FullViewTemplate}"
/>
</DataTemplate>
</ToolTip.ContentTemplate>

Resources