Dom Sinclair
Dom Sinclair

Reputation: 2528

Is there a mathematical formula that can be applied to determine margin and (possibly) font size

In a wpf user control I'm creating the end user has the option to alter the default size of the included images. When Originally designing the control I based my eventual margin sizes on trial and error, eventually settling on what looked right to me.

When image sizes were either 16 x 16 or 24 x 24 the overall look is reasonable;

enter image description here

enter image description here

but once you start to dramatically increase the image size to two textboxes and text block in the control get thrown out of sync with the images.

enter image description here

The xaml that I originally used for the text and text block is shown below (it also includes the find button in the middle of them but helps by showing how all buttons are defined).

 <TextBox x:Name="Record" BorderThickness="0" Margin="6" ></TextBox>
 <Button Background="#00000000" x:Name="Find" Height="Auto" Width="Auto" 
         ToolTip="Find the Record at this position." BorderThickness="0">
    <StackPanel Margin="2" Orientation="Horizontal">
      <Image Source="{Binding ImageFind, ElementName=DN}"
             Width="{Binding ImageFindWidth, ElementName=DN}"
             Height="{Binding ImageFindHeight, ElementName=DN}"/>
      <TextBlock Margin="3" Text="{Binding TextFind,ElementName=DN}"/>
    </StackPanel>
  </Button>
  <TextBlock Margin="6">of</TextBlock>
  <TextBox x:Name="Records" BorderThickness="0" 
           Margin="6" 
           Text="{Binding RecordsCount, ElementName=DN}"></TextBox>

All of the buttons and text boxes are contained in a stack panel with horizontal orientation set.

What I would like to know if is there is a mathematical formula that I could apply to the textboxes and textblock at the time that the end user changes the width height of the images (they will always be the same in either dimension) that would correct the layout , thus centring the text in line with the middle of the images.

Possibly there is some other wpf layout trick about which I have yet to learn that does this sort of thing, either way I'd welcome suggestions.

Thanks

Upvotes: 0

Views: 125

Answers (1)

Walt Ritscher
Walt Ritscher

Reputation: 7037

Set the VerticalAlignment property on the TextBlock and VerticalContentAlignment on the TextBox.

 <TextBlock Margin="6" VerticalAlignment='Center'>of</TextBlock>

Upvotes: 1

Related Questions