Now i'm creating a quiz which has answers are images. I put each of them in an button to trigger my own event. The problem i having now is when I hold the button,the image in it will be fullscreen and when I don't hold it,the image return back. I have tried stretch property of image but it doesn't take effect.Please help me to find out the solution. Thanks. Here is my code:
<Button Name="Answer0Button" Hold="Answer0Button_OnHold" Style="{StaticResource ButtonStyle}" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Center" BorderThickness="3" BorderBrush="{Binding Markers, Converter={StaticResource markersConverter}, ConverterParameter=0}">
<Image Source="{Binding Answers[0],Converter={StaticResource quizImagePathConverter}}"/>
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tap">
<command:EventToCommand Command="{Binding AssertCommand}" CommandParameter="{Binding Answers[0]}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
When I debug, this button doesn't get the event on hold.
private void Answer0Button_OnHold(object sender, GestureEventArgs e)
{
//Make the image fullscreen here
}
Related
I need to show items in dropdown menu in line. How can i make it?
You will probably need to build the Control yourself. You can make a Composite Control consisting of a <Button> and a <ListBox> to emulate what you're trying to do. It is actually pretty easy.
For example:
<Button Content="{Binding SelectedItem.Song, FallbackValue=Show List, ElementName=myListBox}" Height="100" Click="Button_Click"></Button>
<ListBox x:Name="myListBox" Height="60" Visibility="Collapsed">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Red" BorderThickness="1" Height="50" Padding="15,0">
<TextBlock VerticalAlignment="Center">
<Run Text="{Binding Song}"></Run>
</TextBlock>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
What I did here is programmed a Button with its Content Binded to the ListBox's SelectedItem which has .Song Property, if none is selected it falls back to "Show List"
When the user clicks on the button it should hide/show the list box depending on its current Visibility.
private void Button_Click(object sender, RoutedEventArgs e)
{
if (this.myListBox.Visibility == System.Windows.Visibility.Collapsed)
{
this.myListBox.Visibility = System.Windows.Visibility.Visible;
}
else
this.myListBox.Visibility = System.Windows.Visibility.Collapsed;
}
Your job is to wrap all this up inside a nice UserControl or you can just use it as is.
Here are some screenshots of it in action:
I am working on a universal windows project.
The windows phone 8.1 UI contains a listview. Listviews's source is databound and its datatemplate contains a button. I want to display a MenuFlyoutMenuFlyout when the button is press-and-hold (like ContextMenu in wp8 toolkit).
My code is :
<DataTemplate x:Key="ListTemplate" x:Name="ListTemplate">
<Button Style="{StaticResource ListButtonStyle}">
<Button.Flyout>
<MenuFlyout>
<MenuFlyoutItem Text="delete"/>
</MenuFlyout>
</Button.Flyout>
</Button>
</DataTemplate>
<ListView ItemsSource="{Binding List}" ItemTemplate="{StaticResource ListTemplate}">
However, this opens the MenuFlyout on clicking the button. How can I change this behavior to press-and-hold event for opening MenuFlyout?
Also, the MenuFlyout zooms in on the Button on which it opens. How can this zooming effect be disabled?
If anybody still interested can use DrawerLayout
How to -
Add "DrawerLayout" Nuget Package reference to your Project.
Add Name space xmlns:drawerLayout="using:DrawerLayout"
Now divide your page in two part drawer and content
<Grid x:Name="RootLayout">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Title Bar -->
<Grid x:Name="TitleBar" Grid.Row ="0" Height="60">
<!-- —Title Bar Code Goes Here -->
</Grid>
<!-- Drawer Layout -->
<drawerLayout:DrawerLayout Grid.Row="1" x:Name="DrawerLayout">
<!-- DrawerLayout code goes here -->
</drawerLayout:DrawerLayout>
</Grid>
4.Add Drawer Icon
<Grid x:Name="TitleBar" Background="#00ADEF" Grid.Row ="0" Height="60">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Margin="5" x:Name="DrawerIcon" Grid.Column="0" Source="/Assets/drawer_icon.png" HorizontalAlignment="Left" Tapped="DrawerIcon_Tapped" />
<TextBlock Grid.Column="1" Text="DRAWER LAYOUT DEMO" Foreground="White" VerticalAlignment="Center" FontSize="18"/>
</Grid>
Drawe Tap Event
private void DrawerIcon_Tapped(object sender, TappedRoutedEventArgs e)
{
if (DrawerLayout.IsDrawerOpen)
DrawerLayout.CloseDrawer();
else
DrawerLayout.OpenDrawer();
}
Thats it.
Note: For more information visit Here
You can modify ContextMenuService from Windows Phone Toolkit.
There is nice tutorial.
http://www.visuallylocated.com/post/2014/05/29/Migrating-from-the-Windows-Phone-Toolkit-ContextMenu-to-the-new-Runtime-MenuFlyout.aspx
In short:
replace ContextMenu for MenuFlyout
add event handler OnElementHolding
private void OnElementHolding(object sender, HoldingRoutedEventArgs args)
{
// this event is fired multiple times. We do not want to show the menu twice
if (args.HoldingState != HoldingState.Started) return;
FrameworkElement element = sender as FrameworkElement;
if (element == null) return;
// If the menu was attached properly, we just need to call this handy method
FlyoutBase.ShowAttachedFlyout(element);
}
modify OnMenuFlyoutChanged
private static void OnMenuFlyoutChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
{
FrameworkElement element = o as FrameworkElement;
if (null != element)
{
// just in case we were here before and there is no new menu
element.Holding -= OnElementHolding;
MenuFlyout oldMenuFlyout = e.OldValue as MenuFlyout;
if (null != oldMenuFlyout)
{
element.SetValue(FlyoutBase.AttachedFlyoutProperty, null);
}
MenuFlyout newMenuFlyout = e.NewValue as MenuFlyout;
if (null != newMenuFlyout)
{
element.SetValue(FlyoutBase.AttachedFlyoutProperty, newMenuFlyout);
element.Holding += OnElementHolding;
}
}
}
Put button in a grid and attach menuflyout to the grid instead of button.
Like this:
<DataTemplate x:Key="ListTemplate" x:Name="ListTemplate">
<Grid Holding="Grid_Holding">
<Button Style="{StaticResource ListButtonStyle}">
</Button>
<FlyoutBase.AttachedFlyout>
<MenuFlyout>
<MenuFlyoutItem Text="delete"/>
</MenuFlyout>
</FlyoutBase.AttachedFlyout>
</Grid>
</DataTemplate>
In Code behind:
private void Grid_Holding(object sender, Windows.UI.Xaml.Input.HoldingRoutedEventArgs e)
{
if (e.HoldingState == Windows.UI.Input.HoldingState.Started)
{
FrameworkElement frameworkElement = sender as FrameworkElement;
FlyoutBase flyoutBase = FlyoutBase.GetAttachedFlyout(frameworkElement);
flyoutBase.ShowAt(frameworkElement);
}
}
I have an application with a pivot control.i am getting out of memory exception when binding image url source dynamically.Please help me out.Thanx in advance
Sample code:
XAML
<phone:Pivot x:Name="PivotProductImages" Grid.Row="1" Margin="0,0,0,77" ItemsSource="{Binding ProductItems}" SelectionChanged="PivotProductImages_SelectionChanged" >
<phone:Pivot.ItemTemplate>
<DataTemplate >
<Image Source="{Binding ProductUrl}"></Image>
</DataTemplate>
</phone:Pivot.ItemTemplate>
</phone:Pivot>
c#
private ObservableCollection<string> objProductimg = new ObservableCollection<string>();
protected override void OnNavigatedTo(NavigationEventArgs e)
{
objProductimg.Add("http://media.testing.com/v2/images_content_split/12594/products_1853164_image1_original.jpg.ashx?quality=90');
objProductimg.Add("http://media.testing.com/v2/images_content_split/12594/products_1853164_image2_original.jpg.ashx?quality=90');
PivotProductImages.ItemsSource = ProductItems}
If the images you download are too large, Windows Phone platform gives you the oportunity to decode them at a specific size. This way, even if your image is 1800 x 1000 for example, you will keep in memory the same image, but at a lower resolution.
<phone:Pivot x:Name="PivotProductImages" Width="100" Grid.Row="1" Margin="0,0,0,77" ItemsSource="{Binding ProductItems}" SelectionChanged="PivotProductImages_SelectionChanged" >
<phone:Pivot.ItemTemplate>
<DataTemplate >
<Image>
<BitmapImage DecodePixelWidth="100" UriSource="{Binding ProductUrl}" \>
</Image>
</DataTemplate>
</phone:Pivot.ItemTemplate>
</phone:Pivot>
If you set only one of the DecodePixelWidth or DecodePixelHeight, the image will be decoded at the desired size and same aspect ratio. By setting both of them to a value, you will decode the all images at the same ratio. This will be problematic if you have many pictures with different sizes.
I hope this will help you.
I have a LongListSelector like that
<phone:LongListSelector Name="ListRecentFiles"
LayoutMode="Grid"
ItemsSource="{Binding}"
GridCellSize="140,140"
SelectionChanged="ListRecentFiles_SelectionChanged">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<Grid Background="Red" Margin="0,0,5,5">
<TextBlock Text="{Binding NoteTitle}" Style="{Binding PhoneTextNormalStyle}" />
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu x:Name="ContextMenu">
<toolkit:MenuItem x:Name="Delete" Header="Delete" Click="DeleteNote_Click" />
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</Grid>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
this is DataContext: public static ObservableCollection<Note> NoteItems;
And i try to delete an item from LongListSelector
private void DeleteNote_Click(object sender, RoutedEventArgs e)
{
Note selectedNote = (sender as MenuItem).DataContext as Note;
ListRecentFiles.ItemsSource.Remove(item);
NoteItems.Remove(selectedNote);
}
It's not work except i navigate to a other XAML page and return
I have visited this page but can't fix link
Without seeing more of the code, it's hard to be sure what's going wrong. But if you are setting
ListRecentFiles.DataContext = NoteItems;
that is incorrect. You want to set
ListRecentFiles.ItemsSource = NoteItems;
The XAML declaration:
ItemSource="{Binding}"
Could do that (depending on the rest of the code). Once .ItemsSource is set correctly, then the line:
NoteItems.Remove(selectedNote);
Should succeed in removing the visual item from the LongListSelector. In any case, you should not do the line:
ListRecentFiles.ItemsSource.Remove(item);
That would do the wrong thing when the list gets so big that it doesn't all fit in memory at once.
I'm a newbie, and I want to make a book app. I read file html in the Webbrowser (Windows Phone 8), but I want to change the background color to black and font color to white, but it is not working. I've tried following css,xaml.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="10,10,14,-10" Background="Black">
<phone:WebBrowser x:Name="web" HorizontalAlignment="Left" Margin="10,0,0,0" VerticalAlignment="Top" Width="446" Loaded="web_Loaded" Height="215" Background="Black" />
</Grid>
It isn't possible as webbrowser engine renders a background color for HTML page. What you can use is a trick. As it is posted here, you can set default Opacity to 0, and when the load is completed, change the opacity to 1:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="10,10,14,-10" Background="Black">
<phone:WebBrowser x:Name="web" HorizontalAlignment="Left" Margin="10,0,0,0" VerticalAlignment="Top"
Loaded="web_Loaded" Width="446" Height="215" Opacity="0" LoadCompleted="web_LoadCompleted"/>
</Grid>
private void web_LoadCompleted(object sender, NavigationEventArgs e)
{
web.Opacity = 1;
}
Or as it is posted here you can cover webbrowser with another element which you collapse when content rendering is finished.