Reputation: 2528
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;
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.
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
Reputation: 7037
Set the VerticalAlignment
property on the TextBlock
and VerticalContentAlignment
on the TextBox
.
<TextBlock Margin="6" VerticalAlignment='Center'>of</TextBlock>
Upvotes: 1