Move the button horizontally in Grid of WPF app - c#

My WPF app has many buttons and they are ordered on 1 row as the below picture:
What I want: When user click the left arrow, button will move left 1 column as below and and vice versa for the right arrow
Could I do this in WPF? Any help would be appreciated on this.

You need to adjust the size of the control based on your view.
private void leftBtn_Click(object sender, RoutedEventArgs e)
{
scrollView.ScrollToHorizontalOffset(scrollView.HorizontalOffset - 220);
}
private void rightBtn_Click(object sender, RoutedEventArgs e)
{
scrollView.ScrollToHorizontalOffset(scrollView.HorizontalOffset + 220);
}
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Button x:Name="leftBtn" Grid.Column="0" Margin="5" Click="leftBtn_Click">Left</Button>
<ScrollViewer Width="660" x:Name="scrollView" Grid.Column="1" VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Hidden">
<StackPanel Orientation="Horizontal">
<Button Margin="10" Width="200">Button1</Button>
<Button Margin="10" Width="200">Button2</Button>
<Button Margin="10" Width="200">Button3</Button>
<Button Margin="10" Width="200">Button4</Button>
<Button Margin="10" Width="200">Button5</Button>
<Button Margin="10" Width="200">Button6</Button>
</StackPanel>
</ScrollViewer>
<Button x:Name="rightBtn" Grid.Column="2" Margin="5" Click="rightBtn_Click">Right</Button>
</Grid>

Related

System.AccessViolationException when trying to launch UWP program

I tried to make a new UWP app just to test things out, but now I'm stuck with this exception:
System.AccessViolationException: 'Attempted to read or write protected memory.
This is often an indication that other memory is corrupt.'
All I did after making new Solution, was to make few more pages and added this to the App() in order to achieve global back button:
public App()
{
this.InitializeComponent();
this.Suspending += OnSuspending;
var currentView = SystemNavigationManager.GetForCurrentView();
currentView.AppViewBackButtonVisibility = AppViewBackButtonVisibility.Visible;
Frame rootFrame = Window.Current.Content as Frame;
}
private void App_BackRequested(object sender, Windows.UI.Core.BackRequestedEventArgs e)
{
e.Handled = On_BackRequested();
}
And now, every time, it goes to this:
var currentView = SystemNavigationManager.GetForCurrentView();
I get this exception. I'm running out of ideas. Does anyone know what could cause this? In my Debugging settings I have unchecked the: "Suppress JIT opimization on module load" -setting, as suggested elsewhere, but that doesn't help.
Is there something that I don't understant of making an UWP-app, where you can click buttons at the top, and a page would change below them. Here's the XAML behind this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="10*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" x:Name="stackPanel_up" Orientation="Horizontal" HorizontalAlignment="Center"
VerticalAlignment="Center" Margin="10">
<Button x:Name="eka" Background="Aqua" Content="First" Width="200"
Height="50" FontSize="30" FontWeight="Bold" CornerRadius="10" Margin="5,0,5,0"
Click="eka_Click"/>
<Button x:Name="toka" Background="Aqua" Content="Second" Width="200" Height="50"
FontSize="30" FontWeight="Bold" CornerRadius="10" Margin="5,0,5,0"
Click="toka_Click"/>
<Button x:Name="kolmas" Background="Aqua" Content="Third" Width="200" Height="50"
FontSize="30" FontWeight="Bold" CornerRadius="10" Margin="5,0,5,0"
Click="kolmas_Click"/>
</StackPanel>
<Button Grid.Column="0" Grid.Row="0" x:Name="BackBtn" FontSize="50" Margin="40,0,0,0"
HorizontalAlignment="Left" Width="100" Height="100" CornerRadius="30"
Background="Transparent" Click="Back_Click" Style="{StaticResource NavigationBackButtonNormalStyle}" />
<Frame Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" x:Name="ChangingArea" Margin="10" Background="AliceBlue"></Frame>
</Grid>

Hiding flyout of a button

I got my DataTemplate for items and within this DataTemplate I have such code:
<Button x:Name="DoneButton"
Style="{StaticResource ButtonStyle1}"
BorderThickness="1"
Margin="0,0,20,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Grid.Column="2"
Grid.Row="1"
Width="50"
Height="50"
>
<Image Source="Images/WPIcons/checked.png" Width="30" Height="30" Margin="-10,0,-10,0" />
<Button.Flyout>
<Flyout x:Name="myFly">
<Grid Margin="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" x:Uid="myNote" Text="Note: " Style="{StaticResource myText}" />
<TextBox Grid.Row="1" TextWrapping="Wrap" AcceptsReturn="True" Height="40" x:Name="note" Text="{Binding RecentNote, Mode=TwoWay}" Style="{StaticResource TextBoxStyle1}"/>
<Button x:Name="CompletedButton"
Command="{Binding CompletedCommand}"
CommandParameter="{Binding}"
Style="{StaticResource ButtonStyle1}"
BorderThickness="1"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Grid.Row="2"
Click="CompletedButton_Click"
Content="Done"
MinWidth="80"
Height="40"
/>
</Grid>
</Flyout>
</Button.Flyout>
</Button>
After the flyout for the item has been called and user put his data in it I want to hide this flyout as soon as user hits the "Done" button (x:Name="CompletedButton").
I tried to do that in code behind like:
private void CompletedButton_Click(object sender, RoutedEventArgs e)
{
Button button = (Button)sender;
Grid grid = (Grid)VisualTreeHelper.GetParent(button);
Flyout fly = (Flyout)VisualTreeHelper.GetParent(grid);
fly.Hide();
}
But I get cast exception with that I can't cast ContentPresenter to Flyout so I guess it's not the way I look for.
How I can hide this flyout?
I resolved it with creating global DependencyObject on the page. So when you click the button it keeps it and I can call its flyout to hide() from button within this flyout. A bit ugly but works like a charm.

access controls present in data template from code behind

I have the following XAML code..
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="DataTemplate1" >
<Border BorderBrush="LightGray" BorderThickness="1" Height="150" Width="500" >
<Grid Width="500" Height="150" Background="White" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="2.5*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Image Grid.Column="0" Height="Auto" Width="Auto" Source="/Images/notav.jpg" Margin="0,5,4,4" HorizontalAlignment="Left" />
<TextBlock Text="{Binding PRICE}" TextWrapping="Wrap" Grid.Column="1" Width="350" Foreground="Black" Height="60" Margin="30,85,20,-10"/>
<TextBlock Text="{Binding ITMNAME }" FontSize="22" TextWrapping="Wrap" Grid.Column="1" Name="txtITMNAME" Foreground="DarkBlue" Width="500" Height="130" Margin="30,40,20,-10"/>
<c4f:RoundButton Grid.Column="2" Name="btntick" Click="btntick_Click" Grid.Row="0" FontSize="25" HorizontalAlignment="Right" Background="LightGray" Foreground="DarkGray" Margin="10,20,45,10" />
</Grid>
</Border>
</DataTemplate>
<ListBox Height="Auto" Name="lstbxmanual" ItemTemplate="{StaticResource DataTemplate1 }" Width="475" Margin="4,148,0,5" Background="White" HorizontalAlignment="Left" Grid.RowSpan="2">
</ListBox>
I have to access round button at code behind ,to change its background property...
private void btntick_Click(object sender, RoutedEventArgs e)
{
btntick. //not able to access...
}
I have gone through following stackoverflow questions..
Access DataTemplate controls in code behind
MSDN link
it seems to be not relevant to my requirement..
please help me in this regard...
Solution 1: Use x:Name instead of Name.
Solution 2: Here is the an alternate way too.
You can cast the event sender object:
private void btntick_Click(object sender, RoutedEventArgs e)
{
RoundButton rdbtn = sender as RoundButton;
//rdbtn.BackColor
}
please try, x:Name in place of Name it will be accessible from your code behind file.
<c4f:RoundButton Grid.Column="2" x:Name="btntick" Click="btntick_Click" Grid.Row="0" FontSize="25" HorizontalAlignment="Right" Background="LightGray" Foreground="DarkGray" Margin="10,20,45,10" />
private void btntick_Click(object sender, RoutedEventArgs e)
{
btntick.Foreground = Brushes.Blue;
}
Good Luck.

How to supress children from invoking parent's event?

I'm creating simple touch-based user comtol web browser. I'm using ManipulationDelta event to pan, zoom-in, zoom-out etc. The browser (Awesomium WebControl) is placed inside a grid of control. When I try to scroll page whole browser moves. How to supress invoking parent's event by childen?
I've set userinput type to ViewInput.Mouse because I want to handle touch by myself.
XAML:
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:awe="http://schemas.awesomium.com/winfx" x:Name="_control" x:Class="WebControlTouch.WebBrowser"
mc:Ignorable="d" d:DesignWidth="497" Height="323.333">
<Grid TouchDown="_mainGrid_TouchDown" x:Name="_mainGrid" Background="Honeydew" Grid.Row="0" Margin="0,0,-66,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="8*"/>
<ColumnDefinition Width="466*"/>
<ColumnDefinition Width="8*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="84*"/>
<RowDefinition Height="7*"/>
<RowDefinition Height="220*"/>
<RowDefinition Height="12*"/>
</Grid.RowDefinitions>
<awe:WebControl TouchDown="_browser_TouchDown" Visibility="Visible" LoadingFrameFailed="_browser_LoadingFrameFailed" LoadingFrameComplete="_browser_LoadingFrameComplete" LoadingFrame="_browser_LoadingFrame" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Name="_browser" AddressChanged="_browser_AddressChanged" Width="Auto" Height="Auto" Grid.Row="2" Grid.Column="1" Margin="0,0,1,0"/>
<TextBox Grid.Row="0" HorizontalAlignment="Left" Name="_addressBar" Height="43" Margin="0,10,0,0" TextWrapping="Wrap" Text="Address" VerticalAlignment="Top" Width="146" Grid.ColumnSpan="2"/>
<Button x:Name="_goButton" Grid.Row="0" TouchDown="Button_TouchDown" Content="Go!" HorizontalAlignment="Left" Margin="131,10,0,0" VerticalAlignment="Top" Width="132" RenderTransformOrigin="-0.164,0.514" Height="43" Click="Button_Click" Grid.Column="1"/>
<Button TouchDown="Btn_back" x:Name="_btnBack" Content="Back" Click="Btn_back" HorizontalAlignment="Left" Margin="276,10,0,0" VerticalAlignment="Top" Width="75" Grid.Column="1" Height="20"/>
<Button TouchDown="_btn_forward" x:Name="_btnForward" Content="Forward" HorizontalAlignment="Left" Margin="365,10,0,0" VerticalAlignment="Top" Width="75" Click="_btn_forward" Grid.Column="1" Height="20"/>
<Label x:Name="_Status" Content="Ready" Margin="277,42,130,16" VerticalAlignment="Center" Grid.Column="1" Height="26"/>
<Button x:Name="_exitButton" Content="Exit!" Grid.Column="1" HorizontalAlignment="Left" Margin="365,45,0,0" VerticalAlignment="Top" Width="75" TouchDown="_exitButton_TouchDown"/>
<Button x:Name="_temp" Content="Scroll" Grid.Column="1" HorizontalAlignment="Left" Margin="459.312,10.04,0,0" VerticalAlignment="Top" Width="75" Click="_tempClick"/>
</Grid>
</UserControl>
This means you want some event(s) to stop bubbling (up) the control hierarchy.
All you should usually need to do is marked the event as handled (the event instance you get in your event handler):
e.Handled = true;
In your case should be something like:
private void _browser_TouchDown(object sender, TouchEventArgs e)
{
//...
e.Handled = true;
//...
}

Accessing mediaelement in listbox wp7

I have a MediaElement inside ListBox.How I can get access to "audiop_Copy" by buttons "play/pause"?
<local:TypeTemplateSelector.WithAudio>
<DataTemplate>
<Grid Margin="0,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1">
<TextBlock ... />
<StackPanel Height="50" Orientation="Horizontal" Margin="5,0,4,0" MinHeight="50">
</TextBlock>
<Button Click="PlayMedia" Content="Play" />
<Button Click="PauseMedia" Content="Pause" />
</StackPanel>
<MediaElement Name="audiop_Copy" Source="{Binding audioUri}" Stretch="None" HorizontalAlignment="Left" AutoPlay="False"/>
</StackPanel>
</Grid>
</DataTemplate>
</local:TypeTemplateSelector.WithAudio>
2 ways to do it from the spot (possibly there are more). You will need a pointer to your Button that was clicked anyway:
[difficult, inflexible, fragile] In button Click event handler use VisualTreeHelper class to navigate Visual Tree and find the element. Use sender as starting point
[better solution] use Tag property and binding.
<Button Click="PauseMedia" Content="Pause" Tag={Binding ElementName=audiop_Copy} />
And in handler something like that:
private void PauseMedia(object sender, RoutedEventArgs e)
{
var me = ((FrameworkElement) sender).Tag as MediaElement;
}

Categories