How to fill a rectangle with an image that is coming from a bound listbox on event fire in WP7 - windows-phone-7

i want to create a greeting card maker app for WP7, when a user double taps an image from a listbox, I want that selected image to fill a rectangle on the same page.
Im passing 50 images into the list box like this:
public GCM()
{
InitializeComponent();
var articles = new List<Article>();
for (byte i = 1; i <= 20; i++)
{
Article article = new Article() { Name = "name"+i, ImagePath = "Assets/Images/Backgrounds/"+i+".jpg" };
articles.Add(article);
}
listBox1.DataContext = articles;
}
and its working fine, now heres an xml snippet:
<Rectangle Fill="#FFF4F4F5" Margin="28,24,30,148" Stroke="Black" Name="rect1" />
................(more code here).........................
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="10" >
<Image Name="bgs" Source="{Binding ImagePath}" Height="90" Width="90" DoubleTap="Load_BG" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
how can i fill the rectangle with the tapped image? this code (below) sets the string null everytime, no matter which image i select, although to my knowledge each has a different name and it should give different names for different images. I will use the name of the image to fill the rectangle. What am i doing wrong?
private void Load_BG(object sender, System.Windows.Input.GestureEventArgs e)
{
string abc = sender.GetType().Name;
}
Please excuse me if the solution is obvious..this is my first app ever. Thank you!

sender parameter should contains the control that triggered the event, in this case Image control. Try to cast it to Image type, then you can get the information you needed from Source property :
private void Load_BG(object sender, System.Windows.Input.GestureEventArgs e)
{
Image img = (Image)sender;
//do something with img.Source here
}

so heres the solution, it works now :)
private void listBox1_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
var img = listBox1.SelectedItem as Article;
ImageBrush imgBrush = new ImageBrush();
imgBrush.ImageSource = new BitmapImage(new Uri(img.ImagePath, UriKind.RelativeOrAbsolute));
rect1.Fill = imgBrush;
}

Related

Size of the Custom popup window using Interaction request

I used a custom confirmation popup window, this the XAML:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Content}" TextWrapping="Wrap" Width="150"/>
<StackPanel Orientation="Horizontal" Margin="6" Grid.Row="1">
<Button x:Name="YesBtn" Width="100" Content="OK" Click="OnOk_Click"/>
<Button x:Name="NoBtn" Width="100" Content="No" Click="OnNo_Click"/>
</StackPanel>
</Grid>
and this is the code behide:
public partial class CustomConfirmation : IInteractionRequestAware
{
public CustomConfirmation()
{
InitializeComponent();
}
public IConfirmation Confirmation
{
get { return this.DataContext as IConfirmation; }
set { this.DataContext = value; }
}
public string Title { get; set; }
public bool Confirmed { get; set; }
public INotification Notification { get; set; }
public Action FinishInteraction { get; set; }
private void OnOk_Click(object sender, RoutedEventArgs e)
{
if (FinishInteraction != null)
{
Confirmation.Confirmed= true;
FinishInteraction();
}
}
private void OnNo_Click(object sender, RoutedEventArgs e)
{
if (FinishInteraction != null)
{
Confirmation.Confirmed = false;
FinishInteraction();
}
}
}
In view model class i have :
two commands(DispalyLongTextCommand and DispalyShortTextCommand): one
to display long message and the other to display a short message
and i have InteractionRequest ConfirmationRequest
object initialized in ctor to raise intercations.
if I display the long message first my custom window resize its content to the hole message, it is OK!
but if a want to display the short message, my window keeps the previous size!
note : even i set the window SizeToContent style to WidthAndHeight but it not working.
<ei:Interaction.Triggers>
<prism:InteractionRequestTrigger SourceObject="{Binding ConfirmationRequest, Mode=TwoWay}">
<prism:PopupWindowAction IsModal="True" CenterOverAssociatedObject="True">
<prism:PopupWindowAction.WindowStyle>
<Style TargetType="Window">
<Setter Property="SizeToContent" Value="WidthAndHeight"/>
</Style>
</prism:PopupWindowAction.WindowStyle>
<prism:PopupWindowAction.WindowContent>
<local:CustomConfirmation/>
</prism:PopupWindowAction.WindowContent>
</prism:PopupWindowAction>
</prism:InteractionRequestTrigger>
</ei:Interaction.Triggers>
can you guide me,
thanks in advance
SOLUTION:
I fixed the problem by adding this code in the code behind of the custom popup window, :
public CustomConfirmationView()
{
InitializeComponent();
Loaded += CustomPopupView_Loaded;
}
private void CustomPopupView_Loaded(object sender, RoutedEventArgs e)
{
var parentWindow = this.Parent as Window;
if (parentWindow != null)
{
parentWindow.Measure(parentWindow.DesiredSize);
}
}
The WindowContent property is reused each time you show a new popup. So, what happens is that when you first show a popup, the CustomPopupView is visualized and the height is set based on the current content. Now, when you close the popup, and change the content to a larger message and then show it again, the CustomPopupView.Height has already been set by the previous action and isn't updated in time for the new Window to get the correct height. So you must now resize the Window to match the new size of the CustomPopupView height. So just add a little code to handle this in your code-behind like this:
public CustomPopupView()
{
InitializeComponent();
Loaded += CustomPopupView_Loaded;
}
private void CustomPopupView_Loaded(object sender, RoutedEventArgs e)
{
var parentWindow = this.Parent as Window;
if (parentWindow != null)
parentWindow.MinHeight = _txt.ActualHeight + 75;
}
Note: '_txt' is the name of the TextBlock with the Content binding.
I think this has to do with the default confirmation window that ships with Prism. The MinWidth and MinHeight are set in the XAML to 300 and 150, respectively. So, the window width/weight will never get any smaller no matter what the window content is. Overriding the window style will not be enough to do what you need.
You could download the Prism code and remove that limitation if you are comfortable enough with that. The source path to the file you would want to start with is below.
\Source\Wpf\Prism.Wpf\Interactivity\DefaultPopupWindows\DefaultConfirmationWindow.xaml
Either that, or ask the Prism team to see if they can make this more flexible, which is probably a better suggestion. You can post this as an issue on their GitHub page. https://github.com/PrismLibrary/Prism/issues

stop the stackpanel items inside scroll viewer to be at the display left side when scroll

I have added 10 images in a stackpanel horizontally which is inside a scrollviewer. When user swipe the page ,the scrollviewer stops at certain position, if the scroll stops in the middle of 2 images like the first image shown below i want to set the image with number 3 to be automatically scroll and fit with the left side of the screen like in the second image
for (int i = 0; i <= 9; i++)
{
Uri uri = new Uri("http://d1mu9ule1cy7bp.cloudfront.net//catalogues/47/pages/p_" + i + "/thump.jpg");
ImageSource img1 = new BitmapImage(uri);
Image rect = new Image { RenderTransform = new TranslateTransform() };
rect.Source = img1;
stack.Children.Add(rect);
}
XAML:
<Grid x:Name="LayoutRoot" Width="480" Background="Transparent" Margin="0,-33,0,0" Height="800">
<ScrollViewer HorizontalContentAlignment="Left" HorizontalAlignment="Left" Name="scroll" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Visible">
<StackPanel Name="stack" Width="Auto" Orientation="Horizontal" HorizontalAlignment="Left" >
</StackPanel>
</ScrollViewer>
</Grid>
The first thing you need to do is detect which item is overlapping the side of the screen. To do this, iterate over each item within the StackPanel and determine their location relative to some other element that has a fixed location on screen.
To do this, I use the following extension method:
/// <summary>
/// Gets the relative position of the given UIElement to this.
/// </summary>
public static Point GetRelativePosition(this UIElement element, UIElement other)
{
return element.TransformToVisual(other)
.Transform(new Point(0, 0));
}
i.e. for each item call the following;
Point position = stackPanelItem.GetRelativePosition(someFixedElement);
Using the location of each item, you should be able to work out which one overlaps the screen.
You then need to calculate by how much you need to scroll in order to ensure that your item is fully visible, then use ScrollViewer.ScrollToVerticalOffset to scroll to that location.
This probably isn't the nicest solution and I am sure there is a better way to achieve this but you could use the following :-
XAML :-
<ListBox x:Name="MyListBox"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ScrollViewer.HorizontalScrollBarVisibility="Visible">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
C# :-
DispatcherTimer myTimer = new DispatcherTimer();
// Constructor
public MainPage()
{
InitializeComponent();
for (int i = 0; i < 10; i++)
{
MyListBox.Items.Add(new Button()
{
Content = i.ToString(),
Width = 200,
Height = 100,
});
MyListBox.MouseMove += new MouseEventHandler(MyListBox_MouseMove);
}
myTimer.Interval = TimeSpan.FromSeconds(1);
myTimer.Tick += new EventHandler(myTimer_Tick);
}
private void myTimer_Tick(object sender, EventArgs e)
{
myTimer.Stop();
SnapFirstItem();
}
private void MyListBox_MouseMove(object sender, MouseEventArgs e)
{
myTimer.Stop();
myTimer.Start();
}
private void SnapFirstItem()
{
foreach (Button currentButton in MyListBox.Items)
{
bool visible = MyListBox.TestVisibility(currentButton, System.Windows.Controls.Orientation.Horizontal, true);
if (visible)
{
MyListBox.ScrollIntoView(currentButton);
break;
}
}
}
The TestVisibility extension method is from the following :-
http://blogs.msdn.com/b/ptorr/archive/2010/10/12/procrastination-ftw-lazylistbox-should-improve-your-scrolling-performance-and-responsiveness.aspx

Want to set storyboard target property as horizontal offset of a scrollviewer

I am using scroll viewer in my app which shows images in a horizontal view. I need to use animation while scrolling like in this video how to acheive this
http://www.youtube.com/watch?v=XVHVBMeqL24
I have tried this
public Storyboard CreateAndApplyStoryboard(UIElement targetElement)
{
Storyboard sb = new Storyboard();
DoubleAnimation animation =
new DoubleAnimation { From = 0, To = 500, Duration = new Duration(TimeSpan.FromSeconds(1.0)) };
//ExponentialEase ese = new ExponentialEase();
//ese.EasingMode = EasingMode.EaseIn;
//animation.EasingFunction = ese;
Storyboard.SetTarget(animation, targetElement);
Storyboard.SetTargetProperty(animation,
new PropertyPath(ScrollViewer.HorizontalOffsetProperty));
sb.Children.Add(animation);
return sb;
}
I am just showing the example i need to scroll from horizontal offset 0 to 500
How to use the dependency property?
<scrollviewer name="scroll">
<StackPanel Name="stack" Width="5000" Orientation="Horizontal" HorizontalAlignment="Left" >
<StackPanel.RenderTransform>
<TranslateTransform x:Name="Trans2" X="0" Y="0" />
</StackPanel.RenderTransform>
</StackPanel>
private void button1_Click(object sender, RoutedEventArgs e)
{
Storyboard sb = CreateAndApplyStoryboard(scroll);
sb.Begin();
}

Windows Phone 7 Back Button issue

In my app I have several pages. When I click on the Windows "Back" Button everything goes back as expected.
However I have 2 pages that are causing me grief. Page "A" is doing some binding in the XAML:
<ListBox x:Name="lbPrograms" ItemsSource="{Binding Items}" SelectionChanged="lbPrograms_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="DataTemplateStackPanel" Orientation="Horizontal">
<Image x:Name="ItemImage" Source="/images/ArrowImg.png" Height="43" Width="43" VerticalAlignment="Top" Margin="10,0,20,0"/>
<StackPanel>
<TextBlock x:Name="ItemText" Text="{Binding programName}" Margin="-2,-13,0,0" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock x:Name="DetailsText" Text="{Binding createDate}" Margin="0,-6,0,3" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
<Image x:Name="ItemFavs" Source="/images/favs.png" Height="43" Width="43" VerticalAlignment="Top" Margin="10,0,20,0"/>
<Image x:Name="ItemDelete" Source="/images/delete.png" Height="43" Width="43" VerticalAlignment="Top" Margin="10,0,20,0"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The code behind for Page A is fairly simple:
protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
// Set the data context of the listbox control to the sample data
if (DataContext == null)
DataContext = App.ViewModel;
App.ViewModel.Refresh();
lbPrograms.ItemsSource = App.ViewModel.Items;
}
private void lbPrograms_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
NavigationService.Navigate(new Uri("/DisplayProgram.xaml?selectedItem=" + lbPrograms.SelectedIndex, UriKind.Relative));
}
private void BackBtn_Click(object sender, EventArgs e)
{
NavigationService.Navigate(new Uri("/MainPage.xaml", UriKind.Relative));
}
Page B has no binding in the XAML as I am taking the data from the ModelView a drawing it out dynamically on the screen. Like so:
private int index;
protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
string selectedIndex = "";
if (NavigationContext.QueryString.TryGetValue("selectedItem", out selectedIndex))
{
//prevents error
if (int.Parse(selectedIndex) == -1)
{
return;
}
if ((DataContext == null))
{
index = int.Parse(selectedIndex);
App.ViewModel.Refresh();
DataContext = App.ViewModel.Items[index].nValDictionary;
int i = 0;
foreach (KeyValuePair<string, string> kvp in (((System.Collections.Generic.Dictionary<string, string>)(DataContext))))
{
StackPanel sp = new StackPanel();
sp.Name = "sp" + i;
sp.Background = new SolidColorBrush(Colors.Black);
sp.Width = 460;
WrapPanel wp = new WrapPanel();
wp.Name = "test" + i;
wp.Width = 300;
wp.Height = 200;
TextBlock txt = new TextBlock();
txt.Text = kvp.Key.ToString();
txt.Foreground = new SolidColorBrush(Colors.White);
sp.Children.Add(txt);
int chkBoxesVal = 0;
if (kvp.Value == "")
{
chkBoxesVal = 0;
}else{
chkBoxesVal = Convert.ToInt32(kvp.Value.ToString());
}
int iCount = 0;
for (iCount = 0; iCount <= chkBoxesVal - 1; iCount++)
{
CheckBox chk = new CheckBox();
chk.Name = i.ToString();
chk.Width = 56;
chk.Height = 70;
chk.Content = "";
//chk.Background = new SolidColorBrush(Colors.Black);
//chk.BorderBrush = new SolidColorBrush(Colors.White);
chk.Style = (Style)Application.Current.Resources["checkBoxNG"];
wp.Children.Add(chk);
}
sp.Children.Add(wp);
lbItems.Items.Add(sp);
i += 1;
}
}
}
}
}
So when I'm going forward everything works fine, but when I hit the Windows "Back" button on Page B I get an error. I stepped through my code and when I hit the "Back" button it does go back to Page A, but then it is also going to Page B, which then throws the error and stops. So can anyone tell me why this behavior is happening? I would expect that it would go back to Page A and just stop there. Not to go back to Page B. is there something in my code that is causing it to reload Page B? Any resources that you can provide that might explain this behavior is also welcome!
Thanks!
It looks like SelectionChanged on Page A is firing as a result of the ItemsSource initialisation you're doing in OnNavigatedTo.
You could verify the SelectedIndex is -1 before taking any action in the SelectionChanged event.
Alternatively you could remove any existing event handler on SelectionChanged while doing this initialisation and restore that event handler on completion.
My assumption is that lbPrograms_SelectionChanged event occurs when you press back button and page A is loaded again.
Change your navigation design. For your DataTemplateStackPanel you could use ManipulationStarted event
and inside add
NavigationService.Navigate(new Uri("/DisplayProgram.xaml?selectedItem=" + lbPrograms.SelectedIndex, UriKind.Relative));

How To Display the Images Dynamically in windows phone 7 application developement?

I Want to Display the Images Dynamically.i'e If Whenever Click On Particular image some more (4 to 5 times)times that can be disappear and new image can be fill this place.in that i want to display the images dynamically in windows phone 7 using silverlight.
I know this is a very old question but I had a couple of free minutes ;)
The following will display a different random image from the images stored on the device every fourth time the screen is tapped.
XAML:
xmlns:Controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.Background>
<ImageBrush x:Name="myImg" />
</Grid.Background>
<Controls:GestureService.GestureListener>
<Controls:GestureListener Tap="GestureListener_Tap" />
</Controls:GestureService.GestureListener>
</Grid>
C#
using Microsoft.Phone.Controls;
using System.Windows.Media.Imaging;
using Microsoft.Xna.Framework.Media;
private int tapCount = 0;
private void GestureListener_Tap(object sender, GestureEventArgs e)
{
tapCount += 1;
if (tapCount % 4 == 0)
{
SetRandomImage();
}
}
private void SetRandomImage()
{
var lib = new MediaLibrary();
using (var pic = lib.Pictures[new Random().Next(0, lib.Pictures.Count - 1)])
{
var img = new BitmapImage();
img.SetSource(pic.GetImage());
myImg.ImageSource = img;
}
}

Resources