We Keep Coding

Listview items based on datatypes with delete buttons

I have something like a regex search pattern and this pattern consists of objects of type Variable or Literal. I need to show those objects one after another in line like this:
Variable is blue, Literal is red. I have defined two DataTemplates to set the colors.
<DataTemplate DataType="{x:Type local:Literal}">
<Border BorderThickness="1" BorderBrush="Red" Padding="5" Margin="0 0 1 0"
Background="Black">
<TextBox Text="{Binding Text}" />
</Border>
</DataTemplate>
<DataTemplate DataType="{x:Type local:Variable}">
<Border BorderThickness="1" BorderBrush="Blue" Padding="5" Margin="0 0 1 0"
Background="Black">
<TextBox Text="{Binding Text}" />
</Border>
</DataTemplate>
My idea was to put a collection of these objects into a ListView and add delete buttons somehow so I can delete objects from the collection, but I am not sure how do that.
<ListView ItemsSource="{Binding RegExList}" Margin="5" Grid.Column="0"
HorizontalAlignment="Left" VerticalAlignment="Center">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ListView>
RegExList is where those objects are.

You could add commands to the view model that contains the RegExList to delete items.
There are different implementations of ICommand. If you do not have a concrete command type, you could take it e.g. from here. The RelayCommand takes a method to execute and a method that returns whether the command can be executed with the given parameter. If you are new to commands, you can have a look at this article.
public class MyViewModel : INotifyPropertyChanged
{
public ICommand DeleteVariable { get; }
public ICommand DeleteLiteral { get; }
// ...your RegExList collection, other properties.
public MyViewModel()
{
DeleteVariable = new RelayCommand<Variable>(ExecuteDeleteVariable, CanExecuteDeleteVariable);
DeleteLiteral = new RelayCommand<Literal>(ExecuteDeleteLiteral, CanExecuteDeleteLiteral);
}
private void CanExecuteDeleteVariable(Variable variable)
{
// Optionally add conditions on when deletion is allowed
return true;
}
private void ExecuteDeleteVariable(Variable variable)
{
RegExList.Remove(variable);
}
private void CanExecuteDeleteLiteral(Literal literal)
{
// Optionally add conditions on when deletion is allowed
return true;
}
private void ExecuteDeleteLiteral(Literal literal)
{
RegExList.Remove(literal);
}
}
Bind a button in the DataTemplate to the corresponding command of the parent data context and bind the current item as CommandParameter.
<DataTemplate DataType="{x:Type local:Literal}">
<Border BorderThickness="1" BorderBrush="Red" Padding="5" Margin="0 0 1 0"
Background="Black">
<StackPanel Orientation="Horizontal">
<TextBox Text="{Binding Text}" />
<Button Content="X"
Command="{Binding DataContext.DeleteVariable, RelativeSource={RelativeSource AncestorType={x:Type ListView}}}"
CommandParameter="{Binding}"/>
</StackPanel>
</Border>
</DataTemplate>
<DataTemplate DataType="{x:Type local:Variable}">
<Border BorderThickness="1" BorderBrush="Blue" Padding="5" Margin="0 0 1 0"
Background="Black">
<StackPanel Orientation="Horizontal">
<TextBox Text="{Binding Text}" />
<Button Content="X"
Command="{Binding DataContext.DeleteLiteral, RelativeSource={RelativeSource AncestorType={x:Type ListView}}}"
CommandParameter="{Binding}"/>
</StackPanel>
</Border>
</DataTemplate>
As a note, your RegExList collection should be an ObservableCollection<T>, otherwise removing items from the collection will not be reflected in your ListView.

How to use a Popup binded to a ToggleButton inside a ListView in xaml wpf?

I want to make a list of ToggleButtons. Each of them is binded to a popup.
I had a problem with that, so I tried to put everything inside a StackPanel.
But, now, when the app is running, it shows an empty space (for the Popup) right after the ToggleButton. What can I do to solve that?
I've just added two images:
The first one is when the page is being uploaded.
The second one is when I scroll down the page.
<ListView x:Name="ListOfRecipes" HorizontalAlignment="Center" VerticalAlignment="Top" ItemsSource="{Binding}" Grid.Row="1" Margin="25,0.333,25,35" ScrollViewer.VerticalScrollMode="Enabled" Grid.RowSpan="5" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<ToggleButton x:Name="RecipeButton" Grid.Row="1" BorderBrush="#FF65C365" VerticalAlignment="Center" HorizontalAlignment="Center" Click="Button_Click" Height="150" Width="328" >
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Height="128" Width="328">
<Image Source="{Binding Path=ImageUri}" Height="128" Width="128" Margin="0,6,0,-5.667" />
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" VerticalAlignment="Top" Height="128" Width="192">
<TextBlock Height="25" Width="190" Foreground="#FF6FDC13" Text="{Binding Name}" VerticalAlignment="Top" />
<Image Name="YesOrNoImage" Source="{Binding Path=YesOrNoImage}" Width="102" Height="102" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
</StackPanel>
</StackPanel>
</ToggleButton>
<Popup IsOpen="{Binding IsChecked, ElementName=RecipeButton, Mode=TwoWay}" Height="514" Width="328" VerticalAlignment="Center" Name="PopupOne" Grid.Row="1" Grid.RowSpan="4" IsLightDismissEnabled="True" IsHoldingEnabled="False" ScrollViewer.VerticalScrollMode="Enabled" >
<Border BorderBrush="#FF65C365" BorderThickness="1" Background="White" Height="514" Width="328">
<StackPanel Orientation="Vertical" ScrollViewer.VerticalScrollMode="Enabled">
<Image Source="{Binding Path=ImageUri}" Height="328" Width="328" />
<TextBlock Foreground="#FF6FDC13" Text="{Binding Name}" HorizontalAlignment="Left" FontSize="28" />
<ScrollViewer VerticalScrollMode="Enabled" >
<TextBlock Foreground="Black" Text="{Binding RecipeText}" HorizontalAlignment="Left" FontSize="18" />
</ScrollViewer>
</StackPanel>
</Border>
</Popup>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

It seems that the issue is caused by the <PopUp Height=514/>
To test it, set the height to 0 to see if it fixes the gap. If so, you can bind the visibility to PopUp.IsOpen using a Visibility converter (I think Blue MVVM has one). Since I'm not very educated on Converters at the moment, I came up with a workaround.
public RecipeButton : INotifyPropertyChanged {
// Need to implement INotifyPropertyChanged logic on IsCheckedVisiblity for UI to be notified of visibility changes
public Visibility IsCheckedVisibility { get; set; }
private bool _IsChecked;
public bool IsChecked {
get { return _IsChecked };
set { _IsChecked = value;
this.IsCheckedVisibility = value == true ? Visiblity.Collapsed : Visiblity.Visible;
}
}
<PopUp Visibility = "{Binding IsCheckedVisibility}"/>
Let me know if that doesn't work and I'll try something else.

Create buttons programmatically with unique id

I have created some buttons by first filling a class containing get/set methods and then using that info in XAML.
C#
List<MediaDetail> movies = new List<MediaDetail>();
...
...
MovieListView.ItemsSource = movies;
XAML
<Window.Resources>
<DataTemplate x:Key="ItemTemplate">
<WrapPanel Orientation="Vertical" Width="Auto">
<Button Width="200" Height="300" Click="SelectMovie_Click" Name ="NEED THIS TO BE DYNAMIC">
<Button.Template>
<ControlTemplate>
<Image Source="{Binding image}"/>
</ControlTemplate>
</Button.Template>
</Button>
<TextBlock Text="{Binding title}" HorizontalAlignment="Center"/>
</WrapPanel>
</DataTemplate>
</Window.Resources>
<ListView Name="MovieListView" ItemTemplate="{StaticResource ItemTemplate}" ItemsSource="{Binding Path = movies}" Margin="0,0,0,0" SelectionChanged="MovieListView_SelectionChanged" Grid.Row="1">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="5" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
However the issue is, I need each button to have a unique id. I read elsewhere that this can't be done in XAML but I'm not sure how or where in my C# code to create these buttons.

I think the most flexible solution here would be to define a behavior:
public class UniqueNameBehavior : Behavior<FrameworkElement>
{
protected override void OnAttached()
{
base.OnAttached();
//assign unique name to the associated element, for example:
AssociatedObject.Name = Guid.NewGuid().ToString().Replace("-", null);
}
}
In XAML, attach this behavior to any element:
<Button>
<i:Interaction.Behaviors>
<local:UniqueNameBehavior/>
</i:Interaction.Behaviors>
</Button>
where xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" from System.Windows.Interactivity assembly.

scope of element names in XAML

I'm trying to name and then set a DataContext for a ComboBox that's embedded within an ItemsControl.
In my main Window, I can access the ItemsControl by name but not any of the elements within the ItemsControl.
public MainWindow()
{
InitializeComponent();
SList.DataContext = App.SCList; //this is valid
StS.DataContext = App.STList; //this is not
}
And here's the XAML code. I can access SList from within the program but not "StS" or "SPanel1". The compiler error is:
"The name 'StS' does not exist in the current context"
Note that I've tried both "Name" and "x:Name"
<ScrollViewer VerticalScrollBarVisibility="Auto" >
<ItemsControl Name ="SList" ItemsSource ="{Binding}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Margin="12"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="3" CornerRadius="5" Margin="8,8" ClipToBounds="True" Background="Beige">
<StackPanel Name="SPanel1">
<StackPanel Orientation="Horizontal">
<Label Content="S Type"/>
<ComboBox Name ="StS" ItemsSource="{Binding Path=ShipType.TypeName, Mode=TwoWay}" DataContext="STList">
</ComboBox>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label Content="Class Name"/>
<TextBox Text="{Binding Path = Name, Mode=TwoWay}" HorizontalAlignment="Center" FontWeight="Bold" />
</StackPanel>
</StackPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>

ManipulationCompleted event is not firing on Button

In my Windows Phone 8.1 Universal Application, I have a ListView with a button in the ItemTemplate, and I need to see when that button's ManipulationStarted and ManipulationCompleted events are fired. Currently ManipulationStarted works fine, but ManipulationCompleted does not. Could someone help explain why?
SnapsPage.xaml
<Grid Grid.Row="0" Background="#88686868">
<Grid.RowDefinitions>
<RowDefinition Height="130" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Vertical" Margin="20,0,0,0">
<TextBlock Text="{Binding Path=Manager.Account.Username, FallbackValue='loading...'}" Margin="0,12,0,0" Style="{ThemeResource HeaderTextBlockStyle}"/>
<TextBlock x:Uid="Snaps" Text="SNAPS" Style="{ThemeResource TitleTextBlockStyle}" Typography.Capitals="SmallCaps"/>
</StackPanel>
<ScrollViewer x:Name="ScrollViewer" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled"
Padding="0,0,0,20" Grid.Row="1" HorizontalContentAlignment="Stretch">
<ListView HorizontalContentAlignment="Stretch"
ItemsSource="{Binding Path=Manager.Account.Snaps}">
<ListView.ItemTemplate>
<DataTemplate>
<Button x:Name="ButtonSnap" Style="{StaticResource BasicEmptyButtonStyle}"
ManipulationStarting="ButtonSnap_OnManipulationStarting"
ManipulationCompleted="ButtonSnap_OnManipulationCompleted"
ManipulationMode="All"
Command="{Binding ElementName=ItemsControl, Path=DataContext.TryDownloadMediaCommand}"
CommandParameter="{Binding}">
<!-- Content Here -->
</Button>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel HorizontalAlignment="Stretch"></VirtualizingStackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</ScrollViewer>
</Grid>
<Grid Grid.Row="0" x:Name="MediaGrid" Background="#FF000000" IsHitTestVisible="False">
<Image x:Name="MediaImage" IsHitTestVisible="False"/>
<Grid Width="45" Height="45" Background="#99000000"
VerticalAlignment="Top" HorizontalAlignment="Right" Margin="25">
<TextBlock Text="10" VerticalAlignment="Center" HorizontalAlignment="Center" FontFamily="Segoe WP Semibold" FontSize="24" />
</Grid>
</Grid>
SnapsPage.cs
private void ButtonSnap_OnManipulationStarting(object sender, ManipulationStartingRoutedEventArgs e)
{
Debug.WriteLine("ButtonSnap_OnManipulationStarting");
var button = sender as Button;
if (button == null) return;
var snap = button.DataContext as Snap;
if (snap == null) return;
_relevantSnap = snap;
_isFingerDown = true;
_scrollYIndex = ScrollViewer.VerticalOffset;
_holdingTimer.Start();
}
private void ButtonSnap_OnManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
{
Debug.WriteLine("ButtonSnap_OnManipulationCompleted");
_isFingerDown = false;
if (_isMediaOpen)
DisposeMediaTidily();
}

Note: I tested with Windows Phone 8.1 XAML App (not Silverlight)
The Button has a ManipulationMode of System which, according to the docs, means that you should not get manipulation events.
An element must have a ManipulationMode value other than None or System to be a manipulation event source