This is an interesting question, but I would like to overlay a popup only on a single PivotItem within my PivotPage, and only after a certain number of 'events' occurs (the events being a click event, say 50 times clicked). I have in my PivotItem a ListBox, but I am wondering how after my condition is met that I can overlay a popup over it?
XAML
<phone:PivotItem Header="{Binding Path=LocalizedResources.EditPage_Header_Effects, Source={StaticResource LocalizedStrings}}">
<ListBox Name="ListBoxEffects" SelectionMode="Single" ItemsSource="{Binding}" Margin="{Binding}"
toolkit:TiltEffect.IsTiltEnabled="True" SelectionChanged="ListBox_SelectionChanged" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel ItemWidth="146" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Margin="12,0,0,24" >
<Image Source="{Binding Thumbnail}" Width="134" Height="134" />
<TextBlock Text="{Binding Name}" TextWrapping="Wrap" FontSize="{StaticResource PhoneFontSizeNormal}" VerticalAlignment="Center" HorizontalAlignment="Center" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</phone:PivotItem>
Code Behind
private void BuildLocalizedApplicationBar()
{
// Set the page's ApplicationBar to a new instance of ApplicationBar.
ApplicationBar = new ApplicationBar();
ApplicationBarIconButton saveButton = new ApplicationBarIconButton(new Uri("/Assets/AppBar/save.png", UriKind.Relative));
saveButton.Text = AppResources.EditPage_ApplicationBar_Save;
saveButton.Click += saveButton_Click;
ApplicationBar.Buttons.Add(saveButton);
}
void saveButton_Click(object sender, EventArgs e)
{
Settings.SavedCount.Value += 1;
if(Settings.SavedCount.Value > 50)
//Display Popup
ApplySelectedEffectAndSaveAsync();
}
Also, I would need to somehow retrieve the resulting value of the popup (From an OK or Cancel button), and depending on that result either call the ApplySelectedEffectAndSaveAsync() method or return to the previous PivotItem (or previous page). The PivotItem with the overlay is actually index 1 and there is another PivotItem before it with index of 0.
<phone:PivotItem ...>
<Grid>
<ListBox .../>
<Popup Name="MyPopup" IsOpen="false"/>
</Grid>
</phone:PivotItem>
And you manage MyPopup from code behind (you count the clicks or events and set MyPopup.IsOpen = true)
It seems like you are looking for MessageBox.Show. This method shows a popup with your own caption, text and either an OK or OK and cancel buttons. The method returns a MessageBoxResult value which is either MessageBoxResult.OK or MessageBoxResult.Cancel.
This is how it should be implemented in your code:
private void BuildLocalizedApplicationBar()
{
// Set the page's ApplicationBar to a new instance of ApplicationBar.
ApplicationBar = new ApplicationBar();
ApplicationBarIconButton saveButton = new ApplicationBarIconButton(new Uri("/Assets/AppBar/save.png", UriKind.Relative));
saveButton.Text = AppResources.EditPage_ApplicationBar_Save;
saveButton.Click += saveButton_Click;
ApplicationBar.Buttons.Add(saveButton);
}
void saveButton_Click(object sender, EventArgs e)
{
Settings.SavedCount.Value += 1;
if(Settings.SavedCount.Value > 50)
{
if(MessageBox.Show("Message", "Title", MessageBoxButton.OKCancel) == MessageBoxResult.OK)
// Action for "OK"
else
// Action for "Cancel"
}
}
Related
How do I have the dropdown button flyout auto close after user selected an item?
Here is the XAML:
<DropDownButton Content="{x:Bind CurrentMode, Mode=OneWay}" >
<DropDownButton.Flyout>
<Flyout>
<ListView x:Name="testListView" ItemsSource="{x:Bind mDropdownItems, Mode=OneWay}"
SelectionMode="Single" SelectedItem="{x:Bind CurrentMode, Mode=TwoWay}"
SelectionChanged="OnSelectionChanged" >
<ListView.ItemTemplate>
<DataTemplate x:DataType="x:String">
<TextBlock Text="{x:Bind}"></TextBlock>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Flyout>
</DropDownButton.Flyout>
</DropDownButton>
Code Behind:
private void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
var listView = sender as ListView;
// if I add this, the flyout will not show correctly probably due to hiding during initialization.
//testListView.Hide();
NotifyPropertyChanged("CurrentMode");
}
In your OnSelectionChanged event just add this line of code:
DropDownButton.Flyout.Hide();
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.
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; }
}
I have a web browser which is storing all the visited websites. There is just one issue, I would like it for the user to click on one of the records and then it should open in the webbrowser.
Once the user has navigated to a page, this method is called with the url:
public List<String> urls;
public string selectedURL;
public MainPage()
{
InitializeComponent();
listBox.DataContext = urls;
}
private void getHistory(string url)
{
urls.Add(url);
listBox.DataContext = null;
listBox.DataContext = urls;
}
private void listBoxtrend_Tap(object sender, GestureEventArgs e)
{
selectedURL = "";
var selected = listBox.SelectedValue as Item;
selectedText = selected.ItemString;
MessageBox.Show(selectedURL);
browserSearch(selectedURL);
}
This is then displayed into a textblock on a pivot page:
<phone:Pivot Margin="0,0,0,0">
<phone:PivotItem Header="" Margin="0,-104,0,0">
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="72"/>
<RowDefinition Height="696"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="#FF5E667B" >
</Grid>
</phone:PivotItem>
<phone:PivotItem Margin="0,-104,0,0" Header="">
<Grid>
<ListBox ItemsSource="{Binding Item}" Foreground="RoyalBlue" Name="listBox"
TabIndex="10" Tap="listBox_Tap" >
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock TextWrapping="Wrap" FontSize="26" HorizontalAlignment="Left"
x:Name="txtHistory" Text="{Binding ItemString}"
VerticalAlignment="Top" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</phone:PivotItem>
</phone:Pivot>
I have tried to put a click event, but there is one way to tell which record is being clicked. Is there a way to use the SelectionChanged event handler. And is there a better way to store this data, maybe in a array or list which then can be saved to IsolatedStorage.
Thank you in advance :)
If you need any more details please comment and I will be happy to explain in further detail :)
It's better if you would have the data you're going to display within a Listbox, I mean the Url's. So that you could easily get whatever the data you want from the clicked item. Make sure that you bind the source for your Listbox.
your xaml:
<ListBox ItemsSource="{Binding Item}" Foreground="RoyalBlue"
Height="395" HorizontalAlignment="Center"
Margin="12,111,0,0" Name="listBox"
VerticalAlignment="Top" Width="438"
TabIndex="10" Tap="listBox_Tap" >
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock TextWrapping="Wrap" FontSize="26" HorizontalAlignment="Left"
x:Name="txtHistory" Text="{Binding ItemString}"
VerticalAlignment="Top" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And then from your tap event handler of the Listbox
private async void listBoxtrend_Tap(object sender, GestureEventArgs e)
{
selectedText = "";
var selected = listBox.SelectedValue as Item;
selectedText = selected.ItemString;
MessageBox.Show(selectedText);
await Launcher.LaunchUriAsync(new Uri("give the url"));//here should be the selectedText
}
These can be referable for more:
Getting selected value of listbox windows phone 7
LIstbox Selected Item content to textblock
Hope it helps!
I am new to WPF and I want to create a WPF application with 5buttons. On the click of each button I want a content to be displayed on another panel. Right now I just want different images to be displayed on my right side panel on the button clicks.
Here's my XAML code:
<Window x:Class="GridButton.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MyFirstApp" Height="350" Width="525" Loaded="Window_Loaded">
<Viewbox Stretch="Fill" StretchDirection="Both">
<DockPanel>
<StackPanel DockPanel.Dock="left" Margin="5" Width="Auto" VerticalAlignment="Center" Height="Auto">
<Button Content="1" Name="button2" Click="button2_Click">
</Button>
<Button Content="2" Name="button1" Click="button1_Click_1">
</Button>
<Button Content="3" Name="button3" Click="button3_Click">
</Button>
<Button Content="4" Name="button4" Margin="5">
</Button>
<Button Content="5" Name="button5" Margin="5" Click="button5_Click_1">
</Button>
</StackPanel>
<StackPanel DockPanel.Dock="Right">
<Image Name="img1" Source="Blue Hills.jpg" Stretch="Uniform" Visibility="Hidden" ImageFailed="Image_ImageFailed" Height="257" />
</StackPanel>
</DockPanel>
And my xaml.cs file contains code to display image:
private void button2_Click(object sender, RoutedEventArgs e)
{
img1.Visibility = Visibility.Visible;
}
I could get only this far.
You can set the Source property of the Image control in code:
private void buttonx_Click(object sender, RoutedEventArgs e)
{
string path = ... // path to image file here
img1.Source = new BitmapImage(new Uri(path));
}
You could easily reuse the same Click handler for all Buttons and check which one was pressed:
private void Button_Click(object sender, RoutedEventArgs e)
{
Button button = sender as Button;
string path = null;
if (button == button1)
{
path = ... // path to image file 1 here
}
else if ...
if (path != null)
{
img1.Source = new BitmapImage(new Uri(path));
}
}
If you want to remove the a child Panel (or other control) from a parent Panel and add another one, you would have to modify the Panel's Children property:
<StackPanel Name="parent">
<StackPanel Name="child" />
</StackPanel>
parent.Children.Remove(child);
parent.Children.Add(...); // some other control here
This approach would usually make sense if you wanted to create child panels dynamically. If you want to declare everything in XAML you may put all child panels in a Grid and change their visibility as you did already.
However, you might also change the ZIndex attached property.
<Grid>
<StackPanel Name="child1">
</StackPanel>
<StackPanel Name="child2">
</StackPanel>
<StackPanel Name="child3">
</StackPanel>
</Grid>
child3 is topmost by default, but now you can set ZIndex to some value > 0 to make another child topmost:
private void Button_Click(object sender, RoutedEventArgs e)
{
...
// reset ZIndex on previous topmost panel to 0 before
Panel.SetZIndex(child1, 1);
}
Or completely omit the Button/Grid/Panel design and use a TabControl.