mutiple content in button in blend 4 WPF C# - c#

How can i add mutiple content in button like text and image ? in blend 4 WPF C#


You can use a Panel as Content of the Button.
Here's an example with a StackPanel with two children, TextBlock and Image
<Button Width="75" Height="100">
<StackPanel Orientation="Vertical">
<TextBlock Text="Some Text"/>
<Image Source="C:\C1.png" Stretch="Uniform"/>
</StackPanel>
</Button>

Related

How to make UWP Tooltip display on grid hover

In my UWP app, I have a Grid element that contains a Tooltip and a ContentControl. When I hover my mouse over the grid, I'd like to see the tooltip. However, currently the tooltip only displays if I hover over the image inside the grid. Is there a way to achieve this without messing with the "mouse enter" events of the grid boundaries?
<Grid Height="65" Margin="5" Canvas.ZIndex="1">
<ToolTipService.ToolTip>
<ToolTip Placement="Left" Content="You just hovered here"/>
</ToolTipService.ToolTip>
<ContentControl HorizontalAlignment="Center" VerticalAlignment="Center" ContentTemplate="{Binding MyTemplate}"/>
</Grid>

Set the Background property of the Grid to Transparent:
<Grid Height="65" Margin="5" Canvas.ZIndex="1" Background="Transparent">
<ToolTipService.ToolTip>
<ToolTip Placement="Left" Content="You just hovered here"/>
</ToolTipService.ToolTip>
<ContentControl HorizontalAlignment="Center" VerticalAlignment="Center" ContentTemplate="{Binding MyTemplate}"/>
</Grid>
This should make the Grid capture the mouse events and display the tooltip.

WPF: Text under image in button template

I am trying to put a text under an image within button template using a stackpanel but it is not working. Only image is visible, text is not visible. Using template, I can but image as background filling all the button. See below:
<Button Name="btnAdd" Height="36" Width="36" Click="btnAdd_Click" HorizontalAlignment="Center" Margin="10">
<Button.Template>
<ControlTemplate>
<StackPanel Orientation="Vertical">
<Image Source="/MyPath/Add.png"/>
<Label Padding="0">My Button Text</Label>
</StackPanel>
</ControlTemplate>
</Button.Template>
</Button>
How can I do to make my label appear centered under the image and in a small font?

You have 2 problems. You set the Height and Width of your Button to 36 but the text "My Button Text" is wider then 36. And if you Add.png is higher then 36 pixel you wont have any space left for displaying the text.
That's why I would suggest setting the Image Width and Height instead of the Button Width and Height.
For displaying the text in the center under the image you should have to set the HorizontalAlignment property of the Label to "Center".
The result could look like this
<Button>
<Button.Template>
<ControlTemplate>
<StackPanel Orientation="Vertical">
<Image Source="/MyPath/Add.png"
Height="36"
Width="36"/>
<Label HorizontalAlignment="Center"
Content="My Button Text" />
</StackPanel>
</ControlTemplate>
</Button.Template>
</Button>
And in a shorter form
<Button>
<StackPanel Orientation="Vertical">
<Image Source="/MyPath/Add.png"
Height="36"
Width="36"/>
<Label HorizontalAlignment="Center"
Content="My Button Text" />
</StackPanel>
</Button>

TextTrimming TextBlock with other controls next to it

I'm trying to make a really simple title panel, which contains an Image-icon and TextBlock-title in the center of the panel:
To achieve this with TextBlock, I could use StackPanel with Vertical-orientation. But this doesn't work when I need to add the Image in front of TextBlock.
This is the current code, which doesn't work with the TextTrimming:
<StackPanel Orientation="Horizontal">
<Image
Height="28"
Width="28"
Margin="0,0,10,0"
Source="/Resources/Images/Icons/MyIcon.png"
HorizontalAlignment="Left"
VerticalAlignment="Center"/>
<TextBlock x:Name="TitleText"
Text="Test text test text Test asd asd "
VerticalAlignment="Center"
FontSize="28"
TextWrapping="NoWrap"
TextTrimming="WordEllipsis"/>
</StackPanel>
Another solution could be to control the Width of the TextBlock in code, but I'd like to achieve this within XAML. Any ideas?

cannot scroll contents in mainwindow

I have added scrollviewer to my WPF application but when I resize I still cannot see the controls
<ScrollViewer>
<GroupBox Header = "Add Member" FontFamily="Calibri" FontWeight="Bold" FontSize="24" Height="500">
<Grid>
<RadioButton Content = "Female" FontSize="16" FontWeight="Normal" TabIndex="4" Margin="651,335,0,105"/>
</Grid>
</GroupBox>
</ScrollViewer>
What am I missing ?

I copied and pasted your code and it looks fine to me (after removing margin from the radio button): http://screencast.com/t/12wUxd2HFFAJ

How do I place a text over a image in a button in WinRT

I want to create a button using a image as background and on top of the background I want to place my text.
I tried something like this:
<Button Style="{StaticResource ImageButtonStyle}">
<StackPanel>
<TextBlock Text="test"></TextBlock>
<Image Source="ms-appx:///Skins/Images/buton.png" Stretch="None" />
</StackPanel>
</Button>
The text will not be centered correctly.
<Button Style="{StaticResource ImageButtonStyle}">
<StackPanel>
<TextBlock Text="test"></TextBlock>
<Label Padding="0">My Button Text</Label>
</StackPanel>
</Button>
The control Label doesn't exists.
How do I center correctly my text on the image in my first attempt?
Do you know a better way?

You should use a grid instade the stackpanel. Try something like this:
<Button >
<Grid>
<Image Source="..." Stretch="None" />
<TextBlock Text="test" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
</Button>

Categories

Resources