Part 5: Basics of Layout and Events

Sign in to queue

The Discussion

  • User profile image
    Progr

    Good lesson

  • User profile image
    khailv

    Great tutorial!

  • User profile image
    Shen Zhongwei

    'Margins are expressed in exact pixels because they are usually just small values to provide spacing or padding between two relative values ...' My question is: do relative values really mean relative ITEMS? Thanks.

  • User profile image
    BobTabor

    @Shen Zhongwei: Admittedly, I could have said that more cleanly, but I actually did mean "relative values" there.  In other words ... a padding / margin value is expressed as a pixel value because it pads / provides a margin for two widths / heights belonging to two objects (in this example, Rectangle objects, but it could be text boxes, pictures, etc.)  Example: the phone has a fixed width on its screen, but different phones have different fixes widths.  I can specify that two Rectangles on my form should take up half (50%) of the width ... BUT ... I want some padding between the Rectangles so you can see two "boxes", not one.  In order for the layout manager to decide how much width to give each Rectangle, it has to know the overall width minus any fixed widths for margin / padding.  Now that it knows the ABSOLUTE widths, it can calculate the RELATIVE widths. 

    I suppose the designers of the layout manager could have said you could create relative widths for padding and margin and they could still do some calculations to figure out some equitable way to split all that width between the rectangles and margin / padding, but they didn't.  So, what I said was a bit clumsy, but still accurate.

  • User profile image
    Shen Zhongwei

    I see, the "relative values" belong to two rectangles. Thank you.

  • User profile image
    khaled fares

    thanks. i hope you attach the subtitles so that we can focus on the tutorial point instead of the language :)

  • User profile image
    jsaliutama

    Hey Bob,

    Thanks for another awesome video from you!. I've been following your video lessons for quite some time already (since your C# Tutorial).

    I have a question regarding your "challenge" at the end of your video.

    For MainPage.xaml, I added these lines of code:

    <MediaElement x:Name="MeowMediaElement"
    Source="/Assets/Audio/Animals/Cat meow.wav"
    AutoPlay="False"
    Volume="1"
    />
    

    For MainPage.xaml.cs, I added these lines of code:

    myButton.Click += myButton_Click;
    
    void myButton_Click(object sender, RoutedEventArgs e)
            {
                MeowMediaElement.Play();
            }

    I don't think this is "simple" enough, but it works! My question is: Is there any simpler way than this code?

    Once again, I want to say that I really enjoyed your series. Thank you so much!

    ~Josh

  • User profile image
    Clint

    @jsaliutama: to make it simpler, you can do the Click event wire up in XAML.  example: <Button Click="myButton_Click">foo</Button>

  • User profile image
    Eke

    Just out of curiosity, what would happen, if I did:

    myButton.Click = PlayAudioButton_Click; or
    myButton.Click -= PlayAudioButton_Click;

    In the first case my main question is that, would I override some default events associated with button?

  • User profile image
    Clint

    @Eke: you can't do a straight = since event handlers.  You can assign multiple handlers to a single event.  So to add them, you do +=, just like integers.  To remove them, you do -=. 

  • User profile image
    loveran

    Thanks a lot! Your videos really help! I am a senior school student and I was troubled by not finding good tutorial until I watched this great series! Very much thanks!

  • User profile image
    Stoyan

    Im a pascal fan, but on Event handler

    if (sender as TObject).name = 'MeowMediaElement' ;
    then MediaElement.File = '....'; // 1
    if (sender as TObject).name = 'QuackMediaElement'
    then MediaElement.File = '....'; // 2

    MeowMediaElement.Play();

  • User profile image
    Keith

    I have learned more from these lessons then months of trying to find and follow other examples. These are very helpfull and I would like to see more.

  • User profile image
    BobTabor

    @loveran: Very cool!  Good luck to you!

    @Keith: Wow.  Thank you for that nice note.  Smiley

  • User profile image
    Taosif

    Hi Bob,

    I have learn to write C# cod from Your Tutorial, 

    It Was Ossam Thank You for that.

  • User profile image
    Hoi Tran

    thanks Bob!

  • User profile image
    A2Z

    Thanks Bob for this wonderful tutorial.

  • User profile image
    Bhushan Fiske

    Thanks for posting this tutorial. Its realy helps to learn basic of XAML.

  • User profile image
    Aziz

    How can I write += for buttons that I have created using XAML?

  • User profile image
    BobTabor

    @Aziz: Give the XAML control a name attribute.  Reference the XAML control by name in your C# code ... probably want to do that in Window_Load or whatever its called.  Good luck.

  • User profile image
    robalino

    @BobTabor:i have a problem when change "Grid" for "StackPanel", the button in C# disappear and the button in the XAML is ok
    I use System.Windows.HorizontalAlignment.Right for mybutton
     

  • User profile image
    BobTabor

    @robalino: Please post your code.

  • User profile image
    robalino

    @BobTabor:i have this button in the xaml

    <Button Name="PainkillerButton"
    Height="100"
    Width="200"
    HorizontalAlignment="Left"
    VerticalAlignment="Top"
    Click="PlayAudioButton_Click"
    Content="Painkiller">
    <Button.Background>
    <RadialGradientBrush>
    <GradientStop Color="Black" Offset="1"/>
    <GradientStop Color="Red"/>
    </RadialGradientBrush>
    </Button.Background>
    </Button>

    and this in the .cs

    Button myButton = new Button();
    myButton.Name="LeatherRebelButton";
    myButton.Height = 100;
    myButton.Width = 200;
    myButton.HorizontalAlignment = System.Windows.HorizontalAlignment.Right;
    myButton.VerticalAlignment = System.Windows.VerticalAlignment.Top;
    myButton.Background = new SolidColorBrush(Colors.Red);
    myButton.Content="Leather Rebel";
    ContentPanel.Children.Add(myButton);


    if i put the content Panel like "Grid", it's ok, but if i change "Grid" for "StackPanel" the button in the .cs disappears

    PD: i don't have pets's sounds so i used music Smiley

  • User profile image
    BobTabor

    @robalino: Right, because in a StackPanel, the content has to be embedded in the opening / closing tags for it to work. I don't have VS open at the moment, but you probably need to revise last line of C# to MyStackPanelName.Children.Add(myButton) for that to work.  Just a guess ...

  • User profile image
    robalino

    thanks, the problem was resolved

  • User profile image
    Goran

    Hello everyone! I have a problem, can anyone help me? I added more pet sounds in my app, but media element wont play the sound for those on the bottom of the list. It plays normally the ones which are shown when I start the app, but when I scroll down to the bottom it wont play sound for them. Any ideas how could i fix this problem? Thanks in advance!

  • User profile image
    Yogesh

    Hi All,
    I tried to get the contact group details stored in windows phone 8,but i failed can you help me out.I am able to read the contact details but not group.

  • User profile image
    RainMaker​Quark

    Hi Bob,

    Nice videos.

    One quick question for the Part 5: Basics of Layout and Events video, around 09:10 when you have created a 9 cell grid and placed text within each cell.

    As all controls expand to fill up the space unless specified otherwise, why didn't the textblock did so?

     

     

  • User profile image
    BobTabor

    @RainMakerQuark: That's a really good question.  I'm not 100% sure, but I *think* it is because there's a default style on the text.  I could override that style by adding the following:

    <Page.Resources>

    <Style TargetType="TextBlock">

    <Setter Property="FontSize" Value="42" />

    </Style>

    </Page.Resources>

     

  • User profile image
    KingZhong

    @BobTabor:Hi,Bob it's a nice video

    I have a similar question as RainMakerQuark just said.If i declar a button like this:

    <Button name="btn" Content="A Button" FontSize="0.5*" />

    As we known, FontSize="0.5*" is wrong code,but i want the FontSize Attribute works as the Grid. I wish the FontSize changing with the phone's screen size, not a fixed value.I don't know how to do it.

    ps:My English is not good, hoping you know what i mean.

    Thanks a lot.

  • User profile image
    DangThanh​Nhan

    thanks, your tutorial is easy to understand

  • User profile image
    o0rebelious​0o

    Great tutorials, nicely paced and easy to understand.  The Microsoft way of doing things is slightly different in my experience to other platforms, Android etc so good to have the mechanics of it explained.

    A note though, I'm following these having upgraded to windows phone 8.1 using VS2013 Ultimate and quite a bit of the behaviour of the XAML especially, doesn't seem to be the same any more.  For example, it is necessary to set HorizontalAlignment to Stretch for the control to fill the StackPanel control width.

    Button myButton = new Button();
    myButton.Name = "MeowButton";
    myButton.VerticalAlignment = VerticalAlignment.Stretch;
    myButton.HorizontalAlignment = HorizontalAlignment.Stretch;
    myButton.Background = new SolidColorBrush(Colors.Red);
    myButton.Content = "Meow";
    
    ContentRoot.Children.Add(myButton);

    It seems the Vertical and Horizontal Alignment enums have also moved to Windows.UI.Xaml.VerticalAlignment from System.Windows.

    Hopefully this could help anyone trying to follow through using wp8.1 not 8 for the basics of XAML and C# as I am.

    Thanks

  • User profile image
    Fahad​Shafique​Mirza

    Very Nice and User Friendly tutorials.Thanks.JazakALLAH :)

     

  • User profile image
    Fahad​Shafique​Mirza

    But i Couldn't exactly get about StackPannel 

  • User profile image
    Phantompig

    Hi
    When I change my content panel from a grid to a stackpanel and remove the Height and Alignment properties for my button it does not fill to the right. This should be inheriting this width from its parent?

    Here is my code, I am using the libraries for Windows 8.1. Could there be some default in here stopping it, or am I missing the obvious?

    <Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--Title Panel contains the name of the application and the page title-->
    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
    <TextBlock Text="MY APP" Style="{StaticResource BaseTextBlockStyle}" Margin="12,0"/>
    <TextBlock Text="Page Name" Margin="9,-7,0,0" Style="{StaticResource HeaderTextBlockStyle}"/>
    </StackPanel>

    <!--Content Panel-->
    <StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Button Name="PlayAudioButton"
    Width="200"
    VerticalAlignment="Top"
    Click="PlayAudioButton_Click"
    Background="Red">

    Quack
    </Button>
    <MediaElement x:Name="QuackMediaElement"
    Source="/Assets/Audio/Animals/Duck.wav"
    Volume="1.0"
    AutoPlay="False"
    />
    </StackPanel>

    </Grid>

    Any ideas?

  • User profile image
    Phantompig

    Sorry in that last post I forgot to remove the Width="200"

    I was playing around to check the defaults, please ignore that line. The problem is still there without it.

  • User profile image
    Basava

    Nice Tutorial for beginner's Thanks a lot...

  • User profile image
    Smartmil8

    @Basava:Basava! This tutorial is really very cool for beginners, for example for me. Thanks a lot.

  • User profile image
    Smartmil8

    @Phantompig: About "in that last post I forgot to remove the Width="200"". The problem is really still there without it.

  • User profile image
    Mateo

    I really like your Mario Bros.

  • User profile image
    AhmedAlam​Eldin

    Hi Bob Tabor, Thaaaaaaaaaaaaaaaaank you so much for your clean and deep understanding of what beginners need and your clean accent too ^_^ ... Thanks again

  • User profile image
    Vrushank

    hello,
    i just put a button on main page of App.
    Now i want that when i click on this button the next page will be come.
    plz give me the solution.

    this is main-page.xmal.cs code for button

    private void Button_Click_3(object sender, RoutedEventArgs e)
    {

    }

  • User profile image
    Gajendra

    i m havin problem to show images in gridview.
    please suggest what should i do and how should do..???

  • User profile image
    Obaid

    Dear,
    I have buttons on the screen, and all the button doesn't set completely to its edges. What is the process or windows mobile doesn't support the full stretch of button images?

    Error Image link:
    http://stackoverflow.com/questions/26970796/windows-mobile-button-not-filling-the-edges?noredirect=1#comment42507316_26970796

Add Your 2 Cents