I've got some images in a ListBox. When the user clicks one image, I'd like to open a new window (ImageWindow) and show the clicked image in the new window. I've added already a new XAML-file and a eventhandler. This is what I got:
MainWindow:
<ListBox Name="MainListBox">
<ListBox.ItemTemplate>
<DataTemplate>
<DockPanel HorizontalAlignment="Center">
<Image Source="{Binding}" MouseDown="Image_MouseDown"></Image>
</DockPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
/*========================================================================*/
private void Image_MouseDown(object sender, MouseButtonEventArgs e)
{
ImageWindow imageWindow = new ImageWindow();
//Pass image
imageWindow.Show();
}
ImageWindow:
<ListBox Name="ImageListBox">
<ListBox.ItemTemplate>
<DataTemplate>
<DockPanel HorizontalAlignment="Center">
<Image Source="{Binding}"></Image>
</DockPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
How do I pass the clicked image?
See example (click on the image)
Just copy, past and tune this code so it fits your varnames:
private void ListBox_MouseDoubleClick(object sender, MouseButtonEventArgs e) //Varname
{
ImageWindow imageWindow = new ImageWindow { Owner = this };
foreach (var item in ListBox.Items) //Varname
{
imageWindow.ListBox.Items.Add(item);//Varname
}
imageWindow.SetSelectedImageIndex = ListBox.SelectedIndex; //Varname + save the index of the selected item and pass it to ImageWindow
imageWindow.Show();
}
ImageWindow:
private void Window_Loaded(object sender, RoutedEventArgs e)
{
Application.Current.MainWindow.WindowState = WindowState.Normal;
ListBoxItem lbi = (ListBoxItem)ImageListBox.ItemContainerGenerator.ContainerFromIndex(SetSelectedImageIndex); //Get with the index the befor selected item
lbi.Focus(); //Set the focus on it
}
You can start with something like this:
<Grid
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions">
<Popup x:Name="popup" PlacementTarget="{Binding ElementName=imageList}">
<Image Source="{Binding PlacementTarget.SelectedItem , ElementName=popup}"/>
</Popup>
<ListView x:Name="imageList" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<ei:ChangePropertyAction PropertyName="IsOpen"
TargetName="{Binding ElementName=popup}" Value="True"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</ListView>
</Grid>
Add references to Microsoft.Expression.Interactions and to System.Windows.Interactivity to get it work.
Related
I can't get string value from Listbox after selected one item.
In my Listbox I have the Image (blinding source) and TextBlock (blinding source).
My code at .xaml page:
<ListBox Name="carListBox" Height="431" Canvas.Left="28" Canvas.Top="65" Width="446" SelectionChanged="ListBoxOnSelection">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Name="brandImage" Source="{Binding Image}" Width="100" Height="150"></Image>
<Image Name="carImage" Source="{Binding Image}" Width="150" Height="150"></Image>
<TextBlock Name="textDisplay" Text="{Binding ShowDetail}" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
My code at .xaml.cs page (C#)
private void ListBoxOnSelection(object sender, SelectionChangedEventArgs args)
{
MessageBox.Show(carListBox.SelectedItem.ToString());
string saveData = carListBox.SelectedItem.ToString();
}
MessageBox can't show string value and I can't get value after user selected.
MessageBox show [1]https://i.imgur.com/2VSjhgN.jpg
You have to somehow get the Car object before you can have access to it's properties.
Something like this:
private void ListBoxOnSelection(object sender, SelectionChangedEventArgs args)
{
Car myCar=carListBox.SelectedItem as Car;
if(myCar != null)
MessageBox.Show(myCar.ShowDetail); //or any property.
}
I am trying to add a ToolTip on my TextBlock. After some research this is how I added it on UWP
xaml:
<ListView x:Name="flyList" BorderThickness="0" ItemsSource="{Binding}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Border BorderThickness="0,0,0,1" BorderBrush="#FF7C7C7C">
<TextBlock Text="{Binding}" Tapped="TextBlock_Tapped">
<ToolTipService.ToolTip>
<ToolTip Name="tip1" Content="Click to copy signal to clipboard."/>
</ToolTipService.ToolTip>
</TextBlock>
</Border>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
How can I set the ToolTip's content? Or better how can I even access it?
I want to access it on TextBlock's tapped event.
private void TextBlock_Tapped(object sender, TappedRoutedEventArgs e)
{
/*
var send = sender as TextBlock;
var dataPackage = new DataPackage { RequestedOperation = DataPackageOperation.Copy };
dataPackage.SetText(send.Text);
Clipboard.SetContent(dataPackage);
*/
}
Try this:
private void TextBlock_Tapped(object sender, TappedRoutedEventArgs e)
{
var txt = sender as TextBlock;
ToolTip tt = ToolTipService.GetToolTip(txt) as ToolTip;
tt.Content = "...";
}
And please tag your questions properly. UWP is not the same thing as WPF.
I am implementing a Download UI in WPF, where every file that is being downloaded will be shown inside a list box in a DataTemplate
<ListBox>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock x:Name="FileName" text={Binding FileName}" />
<ProgressBar ... />
<Button Content="Cancel" click="ButtonCancel_Click" />
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox>
Now this List is getting populated with all the download information perfectly. Only problem I am having is that when user clicks on Cancel button, to cancel the download, I have to remove an entry from the ObservableCollections. But I don't have the File Name in the click event( I know click event is not MVVM, still I want to do it in click event handler).
Can anyone suggest how do I get the FileName of that particular file when the selectedItem gets cancelled. in The
private void ButtonCancel_Click(...) {}
Although I would still encourage you to use MVVM way of dealing with UI events, here's how you can achieve what you want, using Cancel button's click event handler.
First in your xaml, bind file name to Cancel button's Tag property.
<ListBox>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock x:Name="FileName" text={Binding FileName}" />
<ProgressBar ... />
<Button Content="Cancel" Tag="{Binding FileName}"
Click="ButtonCancel_Click" />
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox>
Then in your click event handler
private void ButtonCancel_Click(object sender, RoutedEventArgs e)
{
Button myButton = (Button)sender;
string fileName = myButton.Tag.ToString();
// use fileName
}
Edit
Just to add a complete example, that was tested locally, and ensured that works.
XAML
<Window x:Class="WpfTestApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<ListBox Name="listBox1">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock x:Name="FileName" Text="{Binding Path=FileName}" />
<Button Content="Cancel" Tag="{Binding Path=FileName}"
Click="ButtonCancel_Click" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Window>
Code-behind
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
var fileNames = new List<DownloadModel>
{
new DownloadModel
{
FileName = "File1"
},
new DownloadModel
{
FileName = "File2"
},
new DownloadModel
{
FileName = "File3"
}
};
listBox1.ItemsSource = fileNames;
}
private void ButtonCancel_Click(object sender, RoutedEventArgs e)
{
var myButton = sender as Button;
if (myButton.Tag == null)
{
MessageBox.Show("Tag value was null.");
}
else
{
MessageBox.Show(string.Format("File name is {0}", myButton.Tag));
}
}
}
public class DownloadModel
{
public string FileName { get; set; }
}
How to resize item in ListBox from C#? I can do ListBox.Height = 100; but I don't know how to resize items in ListBox. Help me, please.
I need to change the size of items in listBox and their number using the ManipulationDelta method.
Main xaml code:
<ListBox x:Name="tileList"
Grid.Row="0"
Margin="5"
ManipulationCompleted="tileList_ManipulationCompleted"
ManipulationDelta="tileList_ManipulationDelta">
<ListBox.RenderTransform>
<CompositeTransform/>
</ListBox.RenderTransform>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<toolkit:HubTile x:Name="hubMain"
Title="{Binding Title}"
Margin="3"
DisplayNotification="{Binding DisplayNotification}"
GroupTag="{Binding GroupTag}"
Message="{Binding Message}"
Notification="{Binding Notification}"
Size="Medium"
Source="{Binding ImageUri}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
and C# code:
private void tileList_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
if (e.PinchManipulation != null)
{
double newWidth = 0.0, newHieght = 0.0;
foreach (tileList lv in tileList.Items)
{
lv.Height = 10;
}
}
}
private void tileList_ManipulationCompleted(object sender, System.Windows.Input.ManipulationCompletedEventArgs e)
{
m_Zoom = 200 / 10;
}
Thanks.
You can always change the ItemTemplate of your ListBox inside the Xaml page
<ListBox>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Height="200" Width="200" /> //This is just an example you can use any control
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Hope this is what you wanted.
You need to access the Items of the Listbox and set the individual height for them like this,
foreach (ListBoxItem lv in YourListbox.Items)
{
lv.Height = 10;
}
I am trying to use context menu in a listbox to run some come code.that require data from which item it originated.the click event context menu item shows msg but i found that it doent not access the originating listview item .
<Canvas x:Name="LeftCanvas" Grid.Column="0" Grid.Row="1" Margin="5,0,0,0">
<StackPanel>
<TextBlock Text="Unseated Guests" Background="Blue" Foreground="White" FontFamily="Verdana" FontSize="11" FontWeight="Bold" Height="17" Width="150" HorizontalAlignment="Left" TextAlignment="Center" Padding="0,4,5,2"></TextBlock>
<ListBox x:Name="UnseatedPersons" ItemsSource="{Binding}" Height="218" Width="150" BorderBrush="Blue" BorderThickness="2" HorizontalAlignment="Left" Padding="3,2,2,2" src:FloorPlanClass.DragEnabled="true" MouseEnter="UnseatedPersons_MouseEnter"
MouseLeave="SourceListBox_MouseLeave">
<ListBox.ItemTemplate>
<DataTemplate>
<DockPanel>
<DockPanel.ContextMenu>
<ContextMenu>
<MenuItem Header="Archive Info" Click="bt_click" />
<MenuItem Header="Guest Info" />
</ContextMenu>
</DockPanel.ContextMenu>
<Image Name="imgPerson" Source="{Binding ImagePath}" />
<TextBlock Name="txtPersonName" Text="{Binding PersonName}" Padding="2,4,0,0" />
</DockPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Canvas>
C#:
void bt_click(object sender, RoutedEventArgs e)
{
MessageBox.Show("my message");
}
Use the sender by casting them to MenuItem. Like:
void bt_click(object sender, RoutedEventArgs e)
{
MenuItem originalItem = (MenuItem)sender;
MessageBox.Show(string.Format("clicked from \"{0}\"", originalItem.Name));
}
The sender in the click event will be the MenuItem you clicked.
Its parent will be the ContextMenu
The PlacementTarget of the ContextMenu will be the DockPanel.
The DockPanel will have the ListBoxItem as an ancestor in the Visual Tree
So to get the ListBoxItem in the click event you can use something similar to this
private void bt_click(object sender, RoutedEventArgs e)
{
MenuItem clickedMenuItem = sender as MenuItem;
ContextMenu contextMenu = clickedMenuItem.Parent as ContextMenu;
DockPanel dockPanel = contextMenu.PlacementTarget as DockPanel;
ListBoxItem listBoxItem = GetVisualParent<ListBoxItem>(dockPanel);
MessageBox.Show(listBoxItem.ToString());
// Update. To display the content of the ListBoxItem
MessageBox.Show(listBoxItem.Content.ToString());
}
public static T GetVisualParent<T>(object childObject) where T : Visual
{
DependencyObject child = childObject as DependencyObject;
// iteratively traverse the visual tree
while ((child != null) && !(child is T))
{
child = VisualTreeHelper.GetParent(child);
}
return child as T;
}