CODEWITHSUNDEEP
c#.netwpfsilverlightxaml
Chris
Chris

Reputation: 27384

Absolute position element WPF

I want to position a cross button in the top right of my dialog without it affecting the flow of the rest of the dialog, this seems to be rather difficult when commpared to CSS?

This currently aligned the content about 20px from the right hand side because its still in column 0 and column 1 is occupying that space. Ideally all the content would be within a StackPanel with the close button being positioned top right. Failing that I guess it may be possible to make the content span the two columns? How do I fix this?

Here is my current XAML:

<Grid Margin="10">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
    </Grid.RowDefinitions>

    <StackPanel Grid.Row="0">
        <TextBlock x:Name="UI_DialogTitle" Style="{StaticResource i2_TitleTextBlock}" Text="{TemplateBinding DialogTitle}" Visibility="{TemplateBinding DialogTitleVisibility}" Margin="0,0,0,10"/>
        <ContentPresenter x:Name="TheContentPresenter"/>
    </StackPanel>

    <Button x:Name="UI_CloseDialog" Style="{StaticResource i2_CloseDialogButton}" Visibility="{TemplateBinding CloseButtonVisibility}" Grid.Column="1" Grid.Row="0"/>
</Grid>

Upvotes: 1

Views: 3365

Answers (2)

Chris
Chris

Reputation: 27384

Turns out I needed the ColumnSpan property - this all works now!

<Grid Margin="10">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
    </Grid.RowDefinitions>

    <StackPanel Grid.Row="0" Grid.ColumnSpan="2">
        <TextBlock x:Name="UI_DialogTitle" Style="{StaticResource i2_TitleTextBlock}" Text="{TemplateBinding DialogTitle}" Visibility="{TemplateBinding DialogTitleVisibility}" Margin="0,0,0,10"/>
        <ContentPresenter x:Name="TheContentPresenter"/>
    </StackPanel>

    <Button x:Name="UI_CloseDialog" Style="{StaticResource i2_CloseDialogButton}" Visibility="{TemplateBinding CloseButtonVisibility}" Grid.Column="1" Grid.Row="0"/>
</Grid>

Upvotes: 2

Pradip
Pradip

Reputation: 1537

I have done something similar. Check the btnClose and the screenshot.

<Grid x:Name="LayoutRoot" Margin="2">
        <Border x:Name="PopupBorder" BorderBrush="SlateGray" BorderThickness="1.5" CornerRadius="12" Visibility="Visible" Opacity="20" Margin="0,0,0,0">
            <Border.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FF000000"/>
                    <GradientStop Color="#CC4895DE" Offset="0.844"/>
                    <GradientStop Color="#FF346592" Offset="0.393"/>
                    <GradientStop Color="#FFFFFFFF" Offset="1"/>
                </LinearGradientBrush>
            </Border.Background>
            <TextBox Height="26" Style="{StaticResource TextBoxStyle}" Margin="0,0,30,220" Name="txtQuotationNumber" Width="332" />

        </Border>
        **<Button Margin="0,4,4,0" Click="OKButton_Click" Cursor="Hand" x:Name="btnClose" Style="{StaticResource CloseStyleX}" VerticalAlignment="Top" ToolTipService.ToolTip="Close Popup"/>**

        -- Datagrid here
        -- COMBOBOX HERE

        <TextBox Height="26" Name="txtValue" IsTabStop="True" VerticalAlignment="Top" Margin="178,10,500,0"></TextBox>
        <Button Content="Search" Click="btnSearch_Click" Style="{StaticResource ButtonStyle}" Height="26" HorizontalAlignment="Right" Margin="0,10,37,0" Name="btnSearch" VerticalAlignment="Top" Width="104" />
    </Grid>

enter image description here

Upvotes: 0

Related Questions