I'm new to using WPF forms, I have created a page that displays images from a database, but despite days of searching I cannot find a way of knowing which image has had a mouse over or mouse click event on it.
To setup the images I have:
public class RBimageData
{
private string _Title;
public string Title
{
get { return this._Title; }
set { this._Title = value; }
}
private BitmapImage _ImageData;
public BitmapImage ImageData
{
get { return this._ImageData; }
set { this._ImageData = value; }
}
private String _ImageID;
public String ImageID
{
get { return this._ImageID; }
set { this._ImageID = value; }
}
}
public MainWindow()
{
InitializeComponent();
RBpartsList rbPartsList = mongoDB.GetRBparts("elements", 1, 7); // get parts from database
List<RBpartsImages> rbImages = rbPartsList.RBparts;
List<RBimageData> md = new List<RBimageData>();
foreach (RBpartsImages img in rbImages)
{
RBimageData m = new RBimageData
{
Title = img.ImageFilename,
ImageID = "id_"+img.PartNum,
ImageData = LoadImage(rbPartsList.FilePath,img.ImageFilename) }; // provides BitmapImage URI for image
md.Add(m);
}
RBbox.ItemsSource = md.ToArray();
}
and the images are displayed in the XAML, I have used the Tag element to hold the ImageID:
<ListView x:Name="RBbox" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Height="143" Margin="10,0,10,10" Background="#FFE6E2E2">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="7" Rows="1" HorizontalAlignment="Stretch"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Border BorderThickness="1" BorderBrush="#FF000000" VerticalAlignment="Top" HorizontalAlignment="Left" Width="100" Height="100" Background="#FFC1A0A0">
<Button
MouseEnter="IdentifyPartImage_MouseEnter"
MouseLeave="IdentifyPartImage_MouseLeave" >
<Image Source="{Binding ImageData}"
HorizontalAlignment="Stretch" VerticalAlignment="Top"
Stretch="UniformToFill"
Tag="{Binding ImageID}"/>
</Button>
</Border>
<TextBlock Text="{Binding Title}" HorizontalAlignment="Center" VerticalAlignment="Top" Width="100" Height="14" FontSize="10" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
but in my codebehind the this.Tag is always null:
private void IdentifyPartImage_MouseEnter(object sender, MouseEventArgs e)
{
// this fails - tag is null
var imgId = this.Tag.ToString();
Debug.WriteLine("id: {0}, {1}", "imageID", imgId.ToString());
}
It won't work with x:Name="{Binding ImageID}".. I can't find anything that will let me identify which image has been clicked, can you help?
Thanks.
When you reference this in your code-behind, it points to the Window object. You are looking for the Tag property of the Image control.
For that I recommend defining the MouseEnter="IdentifyPartImage_MouseEnter" and MouseLeave="IdentifyPartImage_MouseLeave" events on the Image control, and then the sender parameter will be that Image object.
In your XAML:
<Button>
<Image Source="{Binding ImageData}"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Stretch="UniformToFill"
Tag="{Binding ImageID}"
MouseEnter="IdentifyPartImage_MouseEnter"
MouseLeave="IdentifyPartImage_MouseLeave"/>
</Button>
And in your code-behind:
private void IdentifyPartImage_MouseEnter(object sender, MouseEventArgs e)
{
var imgId = ((Image)sender).Tag.ToString();
Debug.WriteLine("id: {0}, {1}", "imageID", imgId);
}
Related
I have task to create in C# UWP user created check-list.
But I have stuck from the beginning cause XAML is new for me, so I have no idea what to start from.
So, I have textbox to enter title, task or subtask to in listbox (priviously added to) selected task.
this is my xaml how it looks like now:
<Page
x:Class="Table1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Table1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid>
<TextBox x:Name="txt" HorizontalAlignment="Left" Height="71" Margin="71,247,0,0" Text="TextBox" VerticalAlignment="Top" Width="395"/>
<RadioButton x:Name="title" Content="Add Title" HorizontalAlignment="Left" Margin="71,86,0,0" VerticalAlignment="Top"/>
<RadioButton x:Name="task" Content="Add Task" HorizontalAlignment="Left" Margin="71,123,0,0" VerticalAlignment="Top"/>
<RadioButton x:Name="subtask" Content="Add Subtask" HorizontalAlignment="Left" Margin="71,155,0,0" VerticalAlignment="Top"/>
<ListBox x:Name="listbox" HorizontalAlignment="Left" Height="68" Margin="71,354,0,0" VerticalAlignment="Top" Width="395"/>
<Button x:Name="btn" Content="Button" HorizontalAlignment="Left" Margin="401,483,0,0" VerticalAlignment="Top" Click="btn_Click"/>
</Grid>
</Page>
There are the code:
public class subtasks
{
public string parent { get; set; }
public string subtask { get; set; }
public subtasks(string parenti, string subtaski)
{
parent = parenti;
subtask = subtaski;
}
public void setsub(string parenti, string sub)
{
parent = parenti;
subtask = sub;
}
}
List<string> Tasks = new List<string>();
List<subtasks> sub = new List<subtasks>();
private void btn_Click(object sender, RoutedEventArgs e)
{
string parent = "";
string Title;
string Task;
string Subtask;
if (title.IsChecked==true)
{
Title = txt.Text;
adding(Title, parent, 1);
}
else if (task.IsChecked==true)
{
Task = txt.Text;
adding(Task, parent, 2);
}
else if (subtask.IsChecked==true)
{
parent = listbox.SelectedItem.ToString();
Subtask = txt.Text;
adding(Subtask, parent, 3);
}
else
{
}
}
private void adding(string str, string par, int x)
{
subtasks subi = new subtasks(par,str);
RowDefinition row = new RowDefinition();
TextBlock text = new TextBlock();
if (x==1)
{
print(str);
}
else if (x==2)
{
Tasks.Add(str);
listbox.Items.Add(str);
text.Text = str;
print(str);
}
else
{
sub.Add(subi);
print(str);
}
}
private void print(string title)
{
int step = 0;
Grid gridwin = new Grid();
gridwin.Children.Clear();
RowDefinition row = new RowDefinition();
TextBlock text = new TextBlock();
text.Text = title;
Grid.SetColumn(text, 0);
Grid.SetRow(text, step);
step++;
for (int i = 0; i < Tasks.Count; i++)
{
text.Text = Tasks[i].ToString();
gridwin.Children.Add(text);
Grid.SetColumn(text, 0);
Grid.SetRow(text, step);
step++;
for (int k = 0; k < sub.Count; k++)
{
if (sub[k].parent == Tasks[i])
{
text.Text = sub[k].subtask.ToString();
gridwin.Children.Add(text);
Grid.SetColumn(text, 0);
Grid.SetRow(text, step);
step++;
}
}
}
}
As you see I need to clear and put data every time the button is clicked, cause you never know when user will decide to add new subtask for previously added task. So, the question is, how to make the table with column1 with tasks and subtasks and column2 which is chekbox.
What you want to probably do is to create a DataTemplate. You use this to specify how list items should be displayed and formatted. This way you can specify you want to lay them out as a Grid with two columns like description and CheckBox. Take a look into the documentation to see some examples of DataTemplates. You can also see the Azure Mobile Apps quickstart for UWP, because although it is focused on demonstrating Microsoft Azure integration to UWP, it is actually a to-do app, which should give you some inspiration for building your own.
The layout could look like this:
<ListBox x:Name="listbox" HorizontalAlignment="Left" Height="68" Margin="71,354,0,0" VerticalAlignment="Top" Width="395">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Text}" />
<CheckBox Grid.Column="1" IsChecked="{Binding IsChecked, Mode=TwoWay}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
You can see my code is also using {Binding} syntax, which you will also need to learn a bit about to be able to know when the user has checked a to-do item in the list. I suggest you to take a look at a simple tutorial sample like here. In fact, data-binding is one of the most important things when building XAML-based apps and when you get to understand this concept, it will help you a lot on the way to becoming a UWP ninja :-) .
Why dont use the UWP DataGrid with CheckBox?
XAML
<toolkit:DataGrid Grid.Column="0" ItemsSource="{x:Bind myItemsToBind}"
x:Name="dgwDeviceSPNs" MinWidth="100"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
HorizontalScrollBarVisibility="Visible"
VerticalScrollBarVisibility="Visible"
AlternatingRowBackground="Transparent"
AreRowDetailsFrozen="False"
AreRowGroupHeadersFrozen="True"
AutoGenerateColumns="False"
CanUserSortColumns="False"
CanUserReorderColumns="True"
RowGroupHeaderPropertyNameAlternative=""
CanUserResizeColumns="True"
MaxColumnWidth="200"
FrozenColumnCount="0"
GridLinesVisibility="Horizontal"
HeadersVisibility="None"
IsReadOnly="True"
RowDetailsVisibilityMode="Collapsed"
SelectionMode="Single">
<toolkit:DataGrid.Columns>
<toolkit:DataGridTemplateColumn MinWidth="10">
<toolkit:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Padding="2">
<CheckBox ToolTipService.ToolTip="{Binding Name}" IsChecked="{Binding IsSelected, Mode=TwoWay}" Content="{Binding Name}"></CheckBox>
</StackPanel>
</DataTemplate>
</toolkit:DataGridTemplateColumn.CellTemplate>
</toolkit:DataGridTemplateColumn>
</toolkit:DataGrid.Columns>
</toolkit:DataGrid>
I have a popup window that takes in input from a user and then should send it to a model which then POSTS it to an azure easy table. When I build the project everything runs fine until I hit the submit button then the app crashes and I get the Null Exception Object reference not set to an instance of an object.
XAML for input:
<Popup x:Name="ppup" IsOpen="False" IsLightDismissEnabled="True"
Width="320" HorizontalAlignment="Left">
<Popup.ChildTransitions>
<TransitionCollection>
<!--<EdgeUIThemeTransition Edge="Left" />-->
<PaneThemeTransition Edge="Left" />
</TransitionCollection>
</Popup.ChildTransitions>
<Grid Width="380" Height="{Binding ElementName=flyoutPane, Path=Height}" Background="{ThemeResource FlyoutBackgroundThemeBrush}" >
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10,10,10,10" >
<TextBlock Name="NameText" Text="Enter Name:"/>
<TextBox Name="NameBox" Width="200" Height="50"/>
<TextBlock Name="SetsText" Text="Enter Sets:"/>
<TextBox Name="SetsBox" Width="200" Height="50"/>
<TextBlock Name="TimeText" Text="Enter Time to complete:"/>
<TextBox Name="TimeBox" Width="200" Height="50"/>
<Button Name="SubmitBtn" Height="30" Width="100" Content="Submit" Click="SubmitBtn_Click"/>
</StackPanel>
</Grid>
</Popup>
C# for handling input and passing it to model:
CombatTableView ctv = new CombatTableView();
private async void SubmitBtn_Click(object sender, RoutedEventArgs e)
{
DrillItem drillItem = new DrillItem();
String Name = NameBox.Text;
int Sets = Int32.Parse(SetsBox.Text);
int Time = Int32.Parse(TimeBox.Text);
await ctv.combatDrillsTable.AddDrill(drillItem, Name, Sets, Time, parameters);
ppup.IsOpen = false;
var dialog = new MessageDialog("Your message here");
await dialog.ShowAsync();
}
View Model:
class CombatTableView
{
public CombatDrillsTable combatDrillsTable { get; set; }
public CombatTableView()
{
this.combatDrillsTable = new CombatDrillsTable();
}
}
Model for interacting with database:
public async Task AddDrill(DrillItem drillItem, String n, int s, int t, string sty)
{
drillItem.Name = n;
drillItem.Sets = s;
drillItem.SetTime = t;
drillItem.Style = sty;
await App.MobileService.GetTable<DrillItem>().InsertAsync(drillItem);
drills.Add(drillItem);
}
In my case the problem was due to a checkbox accidentally bound to the event instead of the property:
<CheckBox x:Name="chkIsActive" Checked="{Binding IsActive}" />
instead of
<CheckBox x:Name="chkIsActive" IsChecked="{Binding IsActive}" />
There was a null value inside combatDrillsTable and the list that was to hold the objects null too because i hadn't put anything into my easy table at that stage so it was throwing a null exception.
I am trying to write a Windows 8 app in C# in which I want to display a list of images that the user selects through FileOpenPicker. I wish to display these images in a GridView using XAML Data-binding. I have tried a few things but the data-binding doesn't seem to work. I am not sure at what location exactly do I need to set the itemssource of the GridView. If I do it in the MainPage constructor then the GridView doesn't get refreshed as the data-bound list gets populated later as the user selects the images.
How do I fix this?
UPDATE 1
If you want to bind GridView, then you need to add few things. See I have updated my answer with some comment lines. You need to add those lines to supply ItemsSource via XAML
Here you go.
C#
private async void btnBrowsePhotos_Click(object sender, RoutedEventArgs e)
{
//var objImageItem = new ImageItem();
FileOpenPicker openPicker = new FileOpenPicker();
openPicker.ViewMode = PickerViewMode.Thumbnail;
openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
openPicker.FileTypeFilter.Add(".jpg");
openPicker.FileTypeFilter.Add(".jpeg");
openPicker.FileTypeFilter.Add(".png");
var files = await openPicker.PickMultipleFilesAsync();
List<ImageItem> ImageList = new List<ImageItem>();
foreach (var file in files)
{
using (var stream = await file.OpenAsync(FileAccessMode.Read))
{
//objImageItem.ImageList.Add(new ImageItem(stream, file.Name));
ImageList.Add(new ImageItem(stream, file.Name));
}
}
gv.ItemsSource = ImageList;
//gv.DataContext = objImageItem;
}
public class ImageItem //: INotifyPropertyChanged
{
/*private ObservableCollection<ImageItem> _ImageList = new ObservableCollection<ImageItem>();
public ObservableCollection<ImageItem> ImageList
{
get { return _ImageList; }
set { _ImageList = value; OnPropertyChanged("ImageList"); }
}*/
public BitmapImage Source { get; set; }
public string Name { get; set; }
public ImageItem()
{
}
public ImageItem(IRandomAccessStream stream, string name)
{
BitmapImage bmp = new BitmapImage();
bmp.SetSource(stream);
Source = bmp;
Name = name;
}
}
XAML
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<StackPanel>
<Button Click="btnBrowsePhotos_Click" Style="{StaticResource BrowsePhotosAppBarButtonStyle}" />
<!-- Add ItemsSource="{Binding ImageList}" to GridView -->
<GridView x:Name="gv">
<GridView.ItemTemplate>
<DataTemplate>
<Grid>
<Image Stretch="Fill" Source="{Binding Source}" Height="192" Width="342" />
<Border Opacity=".8" Background="Black" VerticalAlignment="Bottom" >
<TextBlock Text="{Binding Name}" FontSize="18"/>
</Border>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid MaximumRowsOrColumns="3" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</StackPanel>
</Grid>
so i am working on a Windows Phone 7 application, and i am having a problem, normally in my other WPF/WinForm applications this code would work but here on Wphone 7 i am receiving a problems, i created data class:
public class AlarmTemplate
{
public string Name { get; set; }
public string Time { get; set; }
public BitmapImage Activated { get; set; }
public AlarmTemplate(string name, string time, string activated)
{
Name = name;
Time = time;
Activated = new BitmapImage
{UriSource = new Uri("Images/alarm_" + activated + ".png", UriKind.RelativeOrAbsolute)};
}
}
Next thing read dad, also i tried with hard coding data and its not working:
private List<AlarmTemplate> _templateList = new List<AlarmTemplate>();
private void PopulateList()
{
using (var storage = IsolatedStorageFile.GetUserStoreForApplication())
{
if (!storage.FileExists("file.txt"))
return;
using (var reader = new BinaryReader(storage.OpenFile("file.txt", FileMode.Open)))
{
var s = reader.ReadInt32();
for (var i = 0; i < s; i++)
{
_templateList.Add(new AlarmTemplate(reader.ReadString(), reader.ReadString(),
reader.ReadString()));
}
}
}
lbAlarms.ItemsSource = _templateList;
}
Here is xaml:
<ListBox Height="176.135" HorizontalAlignment="Left" Margin="0,567.164,0,0" Name="lbAlarms" VerticalAlignment="Top" Width="456" Foreground="#FFFFC7C7" ItemsSource="{Binding}" Background="Transparent" AllowDrop="False" BorderThickness="1" BorderBrush="#00900707" Grid.Row="1" Hold="lbAlarms_Hold">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Grid.Row="1" Height="52" Orientation="Horizontal" Name="spList" VerticalAlignment="Top" Width="480" Margin="0,329,0,0" UseLayoutRounding="False">
<Image Height="52" Name="imTStatus" Stretch="Uniform" Width="73" Margin="10,0,0,0" UseLayoutRounding="False" Source="{Binding Activated}" />
<StackPanel Height="52" Name="spHolder" Width="300" Margin="10,0,0,0" VerticalAlignment="Stretch" HorizontalAlignment="Left" UseLayoutRounding="False">
<TextBlock Height="26" Name="tbTTime" Text="{Binding Time}" Foreground="Black" FontFamily=".\Fonts\Nokia.ttf#Nokia" TextAlignment="Left" FontWeight="Bold" Width="230" FontSize="24" HorizontalAlignment="Left" UseLayoutRounding="False" />
<TextBlock Height="26" Name="tbTName" Text="{Binding Name}" Foreground="Black" FontFamily=".\Fonts\Nokia.ttf#Nokia" HorizontalAlignment="Left" Width="297" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Your code is working (I noticed the scrollbar was present on the right), but your text colour is black on black so not very visible.
Get rid of the TextBlock colour Foreground="Black" :)
Note, your margin means your listbox is very small at the bottom of the page, less than 1 item high, so you might want to change that as well.
private List<AlarmTemplate> _templateList = new List<AlarmTemplate>();
public List<AlarmTemplate> TemplateList
{
get { return _templateList; }
set { _templateList = value; }
}
and set the binding to TemplateList.
PROBLEM:
I got the answer when doing some binding from ListBoxSource to ListBoxDisplay BUT weird thing happened:
The selecting and deselecting of items are working fine and displays exactly the selected items on the other ListBox named "ListBoxDetails BUT everytime I select an item the image is gone but selection highlights remain but has no more image in it. (You can still deselect it though even if no more image because the screenspace is still there)
NOTE: I have no other control inside the ListBoxSource (SelectionMode=Multiple) ONLY Image
CODE XAML:
<Window.Resources>
<DataTemplate x:Key="ItemTemplate">
<WrapPanel Height="149" Orientation="Horizontal" Width="193">
<Image HorizontalAlignment="Left" Height="128" Width="180" Margin="0"/>
</WrapPanel>
</DataTemplate>
<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
<ItemsPanelTemplate x:Key="ItemsPanelTemplate2">
<UniformGrid x:Name="UniformGridImageList"/>
</ItemsPanelTemplate>
</Window.Resources>
<Grid x:Name="LayoutRoot">
<ListBox x:Name="ListBoxSource" Width="450" Margin="9,3,442,178" ItemsPanel="{DynamicResource ItemsPanelTemplate2}" SelectionMode="Multiple" d:LayoutOverrides="GridBox" HorizontalAlignment="Left" />
<ListBox Name="ListBoxDisplay" Height="659" HorizontalAlignment="Right" Margin="460,5,0,0" VerticalAlignment="Top" Width="382" ItemsSource="{Binding ElementName=ListBoxSource, Path=SelectedItems}" />
<Button x:Name="buttonLoadImages" Content="Button" HorizontalAlignment="Left" Height="51" Margin="33,0,0,70" VerticalAlignment="Bottom" Width="183" Style="{DynamicResource ButtonStyle1}" Click="buttonLoadImages_Click"/>
<Button Content="Clear" Height="55" HorizontalAlignment="Right" Margin="0,717,442,0" Name="buttonClearListBox" VerticalAlignment="Top" Width="177" Click="button1_Click" />
</Grid>
CODE C#:
above declaration:
private List<Image> _imageList = new List<Image>();
.
.
.
private void buttonLoadImages_Click(object sender, System.Windows.RoutedEventArgs e)
{
this._imageList = GetImageList(#"C:\Users\Public\Pictures\Sample Pictures");
foreach (Image curImage in this._imageList)
{
ListBoxSource.Items.Add(curImage);
}
}
#region GetImageList Method
private List<Image> GetImageList(string strPath)
{
List<Image> imageList = new List<Image>();
string strFilePath = "";
if (Directory.Exists(strPath) == false)
{
MessageBox.Show(string.Format("{0} path could not be found.", strPath));
return imageList;
}
try
{
DirectoryInfo dirInfo = new DirectoryInfo(strPath);
FileInfo[] files = dirInfo.GetFiles("*.jpg",SearchOption.AllDirectories);
foreach (FileInfo curFile in files)
{
strFilePath = curFile.FullName;
Image curImage = new Image();
BitmapImage bmpImage = new BitmapImage();
bmpImage.BeginInit();
bmpImage.UriSource = new Uri(curFile.FullName, UriKind.Absolute);
bmpImage.EndInit();
curImage.Height = 140;
curImage.Stretch = Stretch.Fill;
curImage.Source = bmpImage;
curImage.Margin = new Thickness(10);
imageList.Add(curImage);
}
if (imageList.Count == 0)
MessageBox.Show(string.Format("No image files could be found in {0}", strPath));
}
catch (Exception ex)
{
MessageBox.Show(string.Format("{0}-{1}", ex.Message, strFilePath));
}
return imageList;
}
private void button1_Click(object sender, RoutedEventArgs e)
{
this.listBoxSource.Items.Clear();
}
You are creating Image UI objects and adding them directly to your ListBox.
This means that the SelectedItems is an Image UI object, so ListBox #2 is trying to set it's Items to the exact same Image object reference. This isn't allowed in WPF because UI objects can only have a single parent, however because it is a Binding error, WPF is silent about it (except for probably a warning)
I would recommend making your List<Image> into a List<string> which contains the path name for the image, and changing your <Image> in the template to use that string as it's Source. Also, don't forget to set the ItemTemplate on both your ListBoxes.
<DataTemplate x:Key="ItemTemplate">
<WrapPanel Height="149" Orientation="Horizontal" Width="193">
<Image Source="{Binding }" HorizontalAlignment="Left" Height="128" Width="180" Margin="0" />
</WrapPanel>
</DataTemplate>
I did a quick test and it works fine once you fill your ListBoxes with Strings instead of UI objects