I am trying to design a page in WPF that requires a scroll bar as there is a lot of contet on this particular page. Since there are different types of infomration that need to be inputted, I have put the different parts in different grids. I have then set the ScrollViewer and put all the grids inside this but when I run it it does not work. Here is my code:
<Page x:Class="uniFirstGo.AddStudent"
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:local="clr-namespace:mosque"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"
Title="AddStudent">
<ScrollViewer HorizontalScrollBarVisibility="Auto">
<Grid Margin="0,0,0,-751">
<Grid.RowDefinitions>
<RowDefinition Height="593*"/>
<RowDefinition Height="154*"/>
<RowDefinition Height="46*"/>
<RowDefinition Height="44*"/>
</Grid.RowDefinitions>
<Label Name="ChildsDetails" Content="Childs Details" HorizontalAlignment="Left" Height="24" Margin="350,10,0,0" VerticalAlignment="Top" Width="91"/>
<Grid HorizontalAlignment="Left" Height="178" Margin="20,54,0,0" VerticalAlignment="Top" Width="770">
<Label x:Name="ChildsSurname" Content="Childs Surname" HorizontalAlignment="Left" Height="24" Margin="10,14,0,0" VerticalAlignment="Top" Width="97"/>
<TextBox x:Name="childsSurname" HorizontalAlignment="Left" Height="24" Margin="107,14,0,0" VerticalAlignment="Top" Width="145" SpellCheck.IsEnabled="True"/>
<Label x:Name="ChildsFirstName" Content="Childs First Name" HorizontalAlignment="Left" Height="24" Margin="276,14,0,0" VerticalAlignment="Top" Width="105"/>
<TextBox x:Name="childsFirstName" HorizontalAlignment="Left" Height="24" Margin="386,14,0,0" VerticalAlignment="Top" Width="155"/>
<Label Content="Address" HorizontalAlignment="Left" Margin="10,54,0,0" VerticalAlignment="Top" RenderTransformOrigin="-0.605,0.288" Width="97"/>
<TextBox HorizontalAlignment="Left" Height="23" Margin="107,54,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="468" Grid.ColumnSpan="2"/>
<Label Content="Date of Birth
" HorizontalAlignment="Left" Margin="10,92,0,0" VerticalAlignment="Top" Height="25" Width="83"/>
<DatePicker HorizontalAlignment="Left" Margin="107,93,0,0" VerticalAlignment="Top" Width="130"/>
<Label Content="Postcode" HorizontalAlignment="Left" Margin="600,54,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.368,-0.154"/>
<TextBox x:Name="childsGender_Copy" HorizontalAlignment="Left" Height="24" Margin="663,54,0,0" VerticalAlignment="Top" Width="97"/>
<Label Content="Age" HorizontalAlignment="Left" Margin="10,132,0,0" VerticalAlignment="Top"/>
<TextBox HorizontalAlignment="Left" Height="23" Margin="107,132,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="130"/>
<Label Content="Gender
" HorizontalAlignment="Left" Margin="578,10,0,0" VerticalAlignment="Top" Height="26"/>
<CheckBox Content="Male
" HorizontalAlignment="Left" Margin="651,16,0,0" VerticalAlignment="Top"/>
<CheckBox Content="Female" HorizontalAlignment="Left" Margin="702,16,0,0" VerticalAlignment="Top"/>
</Grid>
<Label Content="Parents Details" HorizontalAlignment="Left" Margin="350,249,0,0" VerticalAlignment="Top"/>
<Grid HorizontalAlignment="Left" Height="201" Margin="10,280,0,0" VerticalAlignment="Top" Width="780">
<Label Content="Fathers Full Name
" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="134" Height="28" RenderTransformOrigin="0.5,0.5"></Label>
<Label Content="Mothers Full Name" HorizontalAlignment="Left" Margin="10,46,0,0" VerticalAlignment="Top" Width="120" Height="29"/>
<TextBox HorizontalAlignment="Left" Height="23" Margin="130,15,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="138"/>
<TextBox HorizontalAlignment="Left" Height="23" Margin="130,52,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="138"/>
<Label Content="Fathers Address
" HorizontalAlignment="Left" Margin="10,80,0,0" VerticalAlignment="Top" Width="107" Height="28"/>
<Label Content="Mothers Address
" HorizontalAlignment="Left" Margin="10,113,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.132,-0.154" Width="107" Height="28"/>
<TextBox HorizontalAlignment="Left" Height="23" Margin="130,85,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="640"/>
<TextBox HorizontalAlignment="Left" Height="23" Margin="130,118,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="640"/>
<Label Content="Fathers Phone Number
" HorizontalAlignment="Left" Margin="283,12,0,0" VerticalAlignment="Top" Height="26"/>
<Label Content="Mothers Phone Number
" HorizontalAlignment="Left" Margin="283,46,0,0" VerticalAlignment="Top" Height="26"/>
<TextBox HorizontalAlignment="Left" Height="23" Margin="426,16,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120"/>
<TextBox HorizontalAlignment="Left" Height="23" Margin="426,49,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120"/>
<Label Content="Mothers Date of Birth" HorizontalAlignment="Left" Margin="554,48,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.48,0.077"/>
<DatePicker HorizontalAlignment="Left" Margin="679,15,0,0" VerticalAlignment="Top" Width="101"/>
<DatePicker HorizontalAlignment="Left" Margin="679,48,0,0" VerticalAlignment="Top" Width="101"/>
<Label Content="Father Date of Birth
" HorizontalAlignment="Left" Margin="554,16,0,0" VerticalAlignment="Top" Height="25"/>
<TextBox HorizontalAlignment="Left" Height="23" Margin="130,153,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="253"/>
<Label Content="Fathers Email" HorizontalAlignment="Left" Margin="10,150,0,0" VerticalAlignment="Top" Width="107"/>
<Label Content="Mothers Email" HorizontalAlignment="Left" Margin="405,150,0,0" VerticalAlignment="Top" Width="107"/>
<TextBox HorizontalAlignment="Left" Height="23" Margin="517,153,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="253"/>
</Grid>
<Label Content="Emergency Contact Details
" HorizontalAlignment="Left" Margin="328,486,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.895,-2.308" Height="29"/>
<Grid HorizontalAlignment="Left" Height="82" Margin="10,520,0,0" VerticalAlignment="Top" Width="780" Grid.RowSpan="2">
<Label Content="Surname
" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="88" Height="29"/>
<Label Content="Surname
" HorizontalAlignment="Left" Margin="10,44,0,0" VerticalAlignment="Top" Width="88" Height="29"/>
<Label Content="First Name
" HorizontalAlignment="Left" Margin="258,44,0,0" VerticalAlignment="Top" Width="88" Height="29" RenderTransformOrigin="0.114,0.448"/>
<Label Content="First Name
" HorizontalAlignment="Left" Margin="258,10,0,0" VerticalAlignment="Top" Width="88" Height="29"/>
<Label Content="Contact Number
" HorizontalAlignment="Left" Margin="513,44,0,0" VerticalAlignment="Top" Width="98" Height="29"/>
<Label Content="Contact Number
" HorizontalAlignment="Left" Margin="513,10,0,0" VerticalAlignment="Top" Width="98" Height="29"/>
<TextBox HorizontalAlignment="Left" Height="23" Margin="618,10,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="152"/>
<TextBox HorizontalAlignment="Left" Height="23" Margin="74,50,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="152"/>
<TextBox HorizontalAlignment="Left" Height="23" Margin="336,14,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="152"/>
<TextBox HorizontalAlignment="Left" Height="23" Margin="74,16,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="152"/>
<TextBox HorizontalAlignment="Left" Height="23" Margin="618,44,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="152"/>
<TextBox HorizontalAlignment="Left" Height="23" Margin="336,50,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="152"/>
</Grid>
<Label Content="Medical, Disability and Special Needs
" HorizontalAlignment="Left" Margin="298,617,0,0" VerticalAlignment="Top" Height="26"/>
<Grid HorizontalAlignment="Left" Height="145" Margin="10,648,0,0" VerticalAlignment="Top" Width="780">
<Label Content="Name of Surgery
" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Height="34"/>
<TextBox HorizontalAlignment="Left" Height="23" Margin="116,12,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="175"/>
<Label Content="Surgery Telephone Number
" HorizontalAlignment="Left" Margin="337,10,0,0" VerticalAlignment="Top" Height="34"/>
<TextBox HorizontalAlignment="Left" Height="23" Margin="512,12,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="258"/>
<Label Content="Surgery Address" HorizontalAlignment="Left" Margin="10,44,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.289,-0.038" Width="100" Height="31"/>
<TextBox HorizontalAlignment="Left" Height="23" Margin="116,49,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="654"/>
</Grid>
</Grid>
</ScrollViewer>
</Page>
Can someone tell me whats going wrong here and why the scroll bar isnt working please?
Thanks.
I set your page as the Content of my WPF main window, which has dimensions of 300x400. And this is what I get:
As you can see the horizontal scroll bar is visible and working quite fine, but the vertical isn't.
But note that for some reason you've set your Grid.Margin to an unusual -751.
<Grid Margin="0,0,0,-751">
The four numbers in Margin are defined as follows:
<Grid Margin="left, top, right, bottom">
So let's take a simpler example. I have the following two Grid controls, one inside another, inside my main window.
<Window x:Class="StackOverflowWPF.MainWindow"
...
Title="MainWindow" Height="300" Width="400">
<Grid Margin="20" Background="LightSeaGreen">
<Grid Margin="5, 10, 15, 20" Background="LightGoldenrodYellow"/>
</Grid>
</Window>
And the designer is like below:
So the inner grid left is 5 pixels from it's container grid, top is 10 from it's container, etc. You get the drift. But see what happens when I set the bottom to a negative number.
<Grid Margin="20" Background="LightSeaGreen">
<Grid Margin="5, 10, 15, -20" Background="LightGoldenrodYellow"/>
</Grid>
Designer:
You're essentially telling XAML that the inner Grid can be outside the outer grid, which kind of defeats the purpose of a margin to begin with.
Now let's go back to your problem. A scroll bar lets you scroll contents in case content is larger than the container. But by speficying a negative margin, you're saying your grid can go 751 pixels below the bottom, essentially rendering the scroll bar useless.
Instead, look what happens you set the margin to a reasonable 0.
<Grid>
<ScrollViewer HorizontalScrollBarVisibility="Auto">
<Grid Margin="0,0,0,0">
The output:
Just remove the Margin="0,0,0,-751" in the main grid:
<Page x:Class="uniFirstGo.AddStudent"
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:local="clr-namespace:mosque"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"
Title="AddStudent">
<ScrollViewer HorizontalScrollBarVisibility="Auto">
<Grid>
<Grid.RowDefinitions>....
I'm developing a UWP application. The design of the UI is similar to the Email app in Windows 10 (My app design).
This is my XAML code:
<Page
x:Class="Milano.InWork"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Milano"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid BorderBrush="White" BorderThickness="1">
<Grid.Background>
<ImageBrush Stretch="Fill" ImageSource="Images/Background.png"/>
</Grid.Background>
<Grid HorizontalAlignment="Left" Height="720" VerticalAlignment="Top" Width="60" BorderBrush="#FFF5F1F1" BorderThickness="0,0,1,0">
<Button x:Name="MenuButton" Content="" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Height="38" Width="38">
<Button.Background>
<ImageBrush Stretch="Uniform" ImageSource="Images/Menu-100.png"/>
</Button.Background>
</Button>
<Button x:Name="logoutbutton" Content="" HorizontalAlignment="Left" Margin="10,650,0,0" VerticalAlignment="Top" Height="43" Width="38">
<Button.Background>
<ImageBrush Stretch="Uniform" ImageSource="Images/Logout_Button.png"/>
</Button.Background>
</Button>
</Grid>
<Grid HorizontalAlignment="Left" Height="47" Margin="63,2,-121,0" VerticalAlignment="Top" Width="1338" BorderBrush="#FFFDFDFD" Padding="0,0,0,1" BorderThickness="0,0,0,1">
<TextBlock x:Name="textBlock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="В Работе" VerticalAlignment="Top" Height="47" Width="1218" FontSize="32" FontFamily="SF UI Display" Padding="550,0,0,0" Foreground="White"/>
</Grid>
<ScrollViewer HorizontalAlignment="Left" Height="668" Margin="63,52,0,0" VerticalAlignment="Top" Width="350">
<GridView x:Name="OrdersGridView" >
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel >
<Grid Height="204" BorderBrush="#FFFBF8F8" BorderThickness="0,0,1,1">
<TextBlock Text="{Binding date_created}" HorizontalAlignment="Left" TextAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Top" Width="350" Height="50" FontFamily="SF UI Display" FontSize="25" FontWeight="Light" Foreground="White" />
<TextBlock TextAlignment="Center" HorizontalAlignment="Left" Margin="0,146,-1,0" TextWrapping="Wrap" Text="{Binding billing.address_1}" VerticalAlignment="Top" Height="58" Width="350" FontFamily="SF UI Display" FontSize="25" FontWeight="Light" Foreground="White" />
<TextBlock HorizontalAlignment="Left" TextAlignment="Center" Margin="0,86,-1,0" TextWrapping="Wrap" Text="{Binding billing.first_name}" VerticalAlignment="Top" Height="60" Width="350" FontFamily="SF UI Display" FontSize="25" FontWeight="Light" Foreground="White" Padding="0,0,0,0"/>
</Grid>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</ScrollViewer>
</Grid>
What I need to do: When user clicks on Grid in right place of screen app show something like Fragment (I know this is Android thing) with some fields and data, like in the Email Windows 10 app:
Before clicking
After clicking
How I can implement this?
Or where I can read tutorial or something like this?
Thank's for help!
It is a typical Master/Detail design in UWP, you can refer to the official Master/detail sample, when on wide-screen mode, it uses ContentPresenter to show the details, and when on narrow-screen mode, it navigates with parameter to the detail page. The official sample is so clear, you can have a check.
From your first image, I think you can use a ListView to replace your GridView, for both controls, you can use SelectionChanged or ItemClick event to show the details, if you want to use ItemClick event, please don't forget to enable the IsItemClickEnabled property.
There is a MasterDetails (Mail App) sample which uses Template 10 as project template, if you're interest in this sample, you can also have a check.
I'm starting with a development in WPF and C # I've learned some things since I come from Windows Forms but I've run into a case that is not how to solve, I thank my guide.
I get the following window menu through a call to a user control and paint it in a frame but looks like.
You see the User control is above the additional menu to maximize the form remains the same, you know as I can solve ??
This is the XAML of the main window.
<controls:MetroWindow x:Class="Laboratorio.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
mc:Ignorable="d"
Title="Sistema de Control y Gestion de Laboratorio"
Height="650" Width="825"
BorderThickness="0"
GlowBrush="Black"
ResizeMode="CanResizeWithGrip"
WindowTransitionsEnabled="False"
Loaded="MainWindow_OnLoaded"
WindowStartupLocation="CenterScreen">
<!-- Menu -->
<Grid>
<Menu Name="MenuPrincipal">
</Menu>
<Frame Name="Contenido"></Frame>
</Grid>
and this the the user control
<UserControl x:Class="Laboratorio.RegistroEquipo"
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"
Loaded="RegistroEquipo_OnLoaded"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="545">
<Grid>
<GroupBox Header="Registro de Equipo">
<Grid>
<Label x:Name="serialLbl" Content="Serial:" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top"/>
<TextBox x:Name="serialTxb" HorizontalAlignment="Left" Height="23" Margin="89,11,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="140"/>
<Label x:Name="descripcionLbl" Content="Descripcion:" HorizontalAlignment="Left" Margin="263,11,0,0" VerticalAlignment="Top"/>
<TextBox x:Name="descripcionTxb" HorizontalAlignment="Left" Height="23" Margin="362,10,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="140"/>
<Label x:Name="marcaLbl" Content="Marca:" HorizontalAlignment="Left" Margin="10,49,0,0" VerticalAlignment="Top"/>
<ComboBox x:Name="marcaCbb" HorizontalAlignment="Left" VerticalAlignment="Top" Width="140" Margin="89,49,0,0"/>
<Label x:Name="claseLbl" Content="Clase:" HorizontalAlignment="Left" Margin="263,49,0,0" VerticalAlignment="Top"/>
<TextBox x:Name="claseTxb" HorizontalAlignment="Left" Height="23" Margin="362,49,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="140"/>
<CheckBox x:Name="externoChk" Content="Externo" HorizontalAlignment="Left" Margin="10,91,0,0" VerticalAlignment="Top"/>
<CheckBox x:Name="patronchk" Content="Patron" HorizontalAlignment="Left" Margin="171,91,0,0" VerticalAlignment="Top"/>
<Label x:Name="articuloLbl" Content="Articulo:" HorizontalAlignment="Left" Margin="263,87,0,0" VerticalAlignment="Top"/>
<TextBox x:Name="articuloTxb" HorizontalAlignment="Left" Height="23" Margin="362,87,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="140"/>
<Label x:Name="articuloLbl_Copy1" Content="Responsable:" HorizontalAlignment="Left" Margin="10,127,0,0" VerticalAlignment="Top"/>
<TextBox x:Name="responsableTxb" HorizontalAlignment="Left" Height="23" Margin="89,127,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="140"/>
<TextBox x:Name="nombreTxb" HorizontalAlignment="Left" Height="23" Margin="263,127,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="239"/>
<Label x:Name="observacionLbl" Content="Observacion:" HorizontalAlignment="Left" Margin="10,175,0,0" VerticalAlignment="Top"/>
<TextBox x:Name="observacionTxb" HorizontalAlignment="Left" Height="79" Margin="10,223,0,0" TextWrapping="Wrap" AcceptsReturn="True" VerticalAlignment="Top" Width="503"/>
<Button x:Name="registrarBtn" Content="Registrar" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="154,338,0,0" Click="Registrar_OnClick"/>
<Button x:Name="salirBtn" Content="Salir" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="263,338,0,0"/>
</Grid>
</GroupBox>
</Grid>
Turn this;
<!-- Menu -->
<Grid>
<Menu Name="MenuPrincipal">
</Menu>
<Frame Name="Contenido"></Frame>
</Grid>
into this;
<!-- Menu -->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Menu Name="MenuPrincipal"/>
<Frame Grid.Row="1" Name="Contenido"/>
</Grid>
Or just swap Grid for StackPanel whichever you prefer.
It's not your application/xaml, it's a Visual Studio tool used for debugging.
When your application is running, go back to Visual Studio, go to the Live Visual Tree, and you can turn off "Show runtime tools in application" (the first button in the toolbar)
I have a few buttons which i want to use throughout my application.
My xaml is:
<Button Content="" Grid.Row="1" Height="79" HorizontalAlignment="Left" Margin="9,643,0,0" Name="Home" VerticalAlignment="Top" Width="77" BorderThickness="0" Click="Home_Click" />
<Button Content="" Grid.Row="1" Height="74" HorizontalAlignment="Left" Margin="108,646,0,0" Name="Map1" VerticalAlignment="Top" Width="67" BorderThickness="0" Click="Map1_Click" />
<Button Content="" Grid.Row="1" Height="71" HorizontalAlignment="Left" Margin="198,649,0,0" Name="City1" VerticalAlignment="Top" Width="70" BorderThickness="0" Click="City1_Click" />
<Button Content="" Grid.Row="1" Height="74" HorizontalAlignment="Left" Margin="295,647,0,0" Name="Cuisine1" VerticalAlignment="Top" Width="74" BorderThickness="0" Click="Cuisine1_Click" />
<Button Content="" Grid.Row="1" Height="71" HorizontalAlignment="Left" Margin="398,649,0,0" Name="Share" VerticalAlignment="Top" Width="67" BorderThickness="0" Click="Share_Click" />
Can anyone please tell me how to use these buttons in all my pages without adding them all the time?
You can create a UserControl with all the buttons in it.
<UserControl x:Class="WPAppTests.ButtonsUserControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}">
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
<!-- Buttons -->
</Grid>
</UserControl>
When you need to use this buttons, paste this code in your page:
xmlns:wpAppTests="clr-namespace:WPAppTests" <!-- Your own path to the UserControl -->
<wpAppTests:ButtonsUserControl />
I hope this will help!
Iam new to windows phone development. I have a grid, which contains a image. I need to make the image visible when i tap on grid(parent of image) and collapsed when i tapped for the second time.
My design as follows
<Grid x:Name="gridThriller" HorizontalAlignment="Left" Height="172" Margin="33,85,0,0" VerticalAlignment="Top" Width="123" Background="Transparent" Tap="selectThiller" >
<Image Source="/Images/right.png" HorizontalAlignment="Right" VerticalAlignment="Top" Stretch="None" />
</Grid>
<Grid x:Name="gridAction" HorizontalAlignment="Left" Height="172" Margin="186,85,0,0" VerticalAlignment="Top" Width="123" Background="Transparent" Tap="selectThiller">
<Image Source="/Images/right.png" HorizontalAlignment="Right" VerticalAlignment="Top" Stretch="None"/>
</Grid>
<Grid x:Name="gridHorror" HorizontalAlignment="Left" Height="172" Margin="340,85,0,0" VerticalAlignment="Top" Width="123" Background="Transparent" Tap="selectThiller">
<Image Source="/Images/right.png" HorizontalAlignment="Right" VerticalAlignment="Top" Stretch="None"/>
</Grid>
<Grid x:Name="gridSciFi" HorizontalAlignment="Left" Height="172" Margin="33,283,0,0" VerticalAlignment="Top" Width="123" Background="Transparent" Tap="selectThiller">
<Image Source="/Images/right.png" HorizontalAlignment="Right" VerticalAlignment="Top" Stretch="None"/>
</Grid>
<Grid x:Name="gridRomantic" HorizontalAlignment="Left" Height="172" Margin="186,283,0,0" VerticalAlignment="Top" Width="123" Background="Transparent" Tap="selectThiller">
<Image Source="/Images/right.png" HorizontalAlignment="Right" VerticalAlignment="Top" Stretch="None"/>
</Grid>
<Grid x:Name="gridComedy" HorizontalAlignment="Left" Height="172" Margin="340,283,0,0" VerticalAlignment="Top" Width="123" Background="Transparent" Tap="selectThiller">
<Image Source="/Images/right.png" HorizontalAlignment="Right" VerticalAlignment="Top" Stretch="None"/>
</Grid>
<Grid x:Name="gridDrama" HorizontalAlignment="Left" Height="172" Margin="33,481,0,0" VerticalAlignment="Top" Width="123" Background="Transparent" Tap="selectThiller">
<Image Source="/Images/right.png" HorizontalAlignment="Right" VerticalAlignment="Top" Stretch="None"/>
</Grid>
<Grid x:Name="gridFantacy" HorizontalAlignment="Left" Height="172" Margin="186,481,0,0" VerticalAlignment="Top" Width="123" Background="Transparent" Tap="selectThiller">
<Image Source="/Images/right.png" HorizontalAlignment="Right" VerticalAlignment="Top" Stretch="None"/>
</Grid>
<Grid x:Name="gridAnimated" HorizontalAlignment="Left" Height="172" Margin="340,481,0,0" VerticalAlignment="Top" Width="123" Background="Transparent" Tap="selectThiller">
<Image Source="/Images/right.png" HorizontalAlignment="Right" VerticalAlignment="Top" Stretch="None"/>
</Grid>
How to solve this problem?
Well it looks like you have the tap event for all of them pointing at the same method so thats an okay first start. If you want to continue down that path then what I would do is the following.
Inside your tap event
foreach(Image item in (sender as Grid).Children)
{
if(item.Visibility == Visibility.Visible)
item.Visibility = Visibility.Collapsed;
else
item.Visibility = Visibility.Visible;
}
NOTE# if you put ANYTHING else in those grid elements other than images this will explode. If you need to add other things then you will need to add separate logic above this to weed out images.