CODEWITHSUNDEEP
c#.netwpf
Alvaromon
Alvaromon

Reputation: 220

Buttons resize with page when i dont want them toWPF

Hello I added some buttons to my Main_Page.xaml and they resize with the window while running the application and i dont want that. I want them to stay the same proportion when i run the app.

Button names are: Exercise_tab_left_button, Exercise_tab_right_button

<Page x:Class="TrackFit_Project.Main_Page"
  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:TrackFit_Project"
  mc:Ignorable="d" 
  d:DesignHeight="453.635" d:DesignWidth="855.207"
  Title="Main_Page"
  ShowsNavigationUI = "false" >

<TabControl Margin="10,10,10.333,10.333">
    <TabItem Header="Exercise"
           HorizontalAlignment="Left"
           Width="58"
           Height="22"
           Margin="-2,-2,0,0"
           VerticalAlignment="Top">
        <Grid Background="#FFE5E5E5">
            <Button x:Name="Exercise_Tab_Profile_Button" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Click="profileButtonClick">
                <Image>
                    <Image.Source>stock profile image.png</Image.Source>
                </Image>
            </Button>
            <Rectangle x:Name="Exercise_tab_rectangle" Fill="#FFCFC6C6" HorizontalAlignment="Left" Height="295" Margin="137,50,0,0" Stroke="Black" VerticalAlignment="Top" Width="625"/>
            <TextBlock HorizontalAlignment="Left" Height="234" Margin="169,87,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Width="548"/>
            **<Button x:Name="Exercise_tab_left_button" Content="&lt;" Margin="148,189,655,154" FontSize="18" FontWeight="Bold"/>
            <Button x:Name="Exercise_tab_Right_button" Content="&gt;" Margin="717,189,83,155" FontSize="18" FontWeight="Bold"/>**
            <TextBlock x:Name="Log_Out_Text_Block" HorizontalAlignment="Left" Margin="10,105,0,0" TextWrapping="Wrap" VerticalAlignment="Top" FontWeight="Bold">
                    <Hyperlink x:Name="Log_out_hyperlink" Click="Log_out_hyperlink_Click">Log out</Hyperlink>
            </TextBlock>
        </Grid>
</TabControl>

This is what i want it to look likeThis is what i end up getting when i run the app

Upvotes: 0

Views: 33

Answers (1)

Streamline
Streamline

Reputation: 982

You have to specify the properties Height and Width instead of setting these values indirectly using the Margin property.

Currently the Margin property determines the width and height of the buttons when they are arranged in the Grid. This can be useful when the UI is static and must not resize when the window is resized.

Assuming you want the UI to dynamically adapt to the size you should embed the Rectangle, TextBlock and the Buttons in a second Grid in a way like this (you might want to figure out the right values for the Margin and size of the buttons):

<Grid Margin="137,50,10,10">
    <Rectangle x:Name="Exercise_tab_rectangle" Fill="#FFCFC6C6" Stroke="Black" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
    <TextBlock HorizontalAlignment="Stretch" Height="234" Margin="32,37" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Stretch" />
    <Button x:Name="Exercise_tab_left_button" Content="&lt;" Margin="11" VerticalAlignment="Center" HorizontalAlignment="Left" Width="20" Height="50" FontSize="18" FontWeight="Bold"/>
    <Button x:Name="Exercise_tab_Right_button" Content="&gt;" Margin="11" VerticalAlignment="Center" HorizontalAlignment="Right" Width="20" Height="50" FontSize="18" FontWeight="Bold"/>
</Grid>

Upvotes: 1

Related Questions