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>
Related
I am trying to make a button in WPF that will show progress but still have its button text visible.
I tried adding a Grid as a child to the button and adding a ProgressBar and Label to the grid, thinking the Grid will fill the button and using VerticalAlignment="Stretch" HorizontalAlignment="Stretch" on the progress bar and label will get me, basically, a clickable progress bar, that can show progress and have a label on top of it. However, I'm having problem with the sizing.
This is my XAML:
<Button Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MinWidth="100" MinHeight="25" Margin="3">
<Grid>
<ProgressBar Value="10" Maximum="20" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
<Label Content="asd2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center"/>
</Grid>
</Button>
This is what I see:
If I change to explicit sizing:
<Button Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MinWidth="100" MinHeight="25" Margin="3">
<Grid>
<ProgressBar Value="10" Maximum="20" Width="100" Height="30" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
<Label Content="asd2" Width="100" Height="30" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center"/>
</Grid>
</Button>
I get this:
Which, visually, is an improvement, but XAML-programatically is worse, since I want the button to resize with the window, if the user can't see it well or something like that. Also, visually - I don't like that little border between the actual button and the start of the progressbar and I've tried setting both "padding" and "margin" to 0, it's not from that.
What I'd like to see - the progress bar taking up ALL the space of the button and the label text staying centered both vertically and horizontally, with respect to the total size of the button.
Put your <Grid> inside of a ControlTemplate and override your <Button.Template>:
<Button Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MinWidth="100" MinHeight="25" Margin="3">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<ProgressBar Value="10" Maximum="20" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
<Label Content="asd2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
What you were doing before is putting your <Grid> inside of the Button's ContentTemplate, not its Template. The problem with the ContentTemplate is that it has some of the default button's styling, such as the little border you don't like. By moving it to the Button's overall Template, you're saying I don't care about how the default button looks, I want it to look exactly like THIS.
What it can look like:
What it can look like if you resize the window:
I'm trying to create a screen, or border where if the user click anywhere inside within this border. It should turn my border color RED. Currently i have my XAML setup as...
<StackPanel VerticalAlignment="Top" Orientation="Horizontal">
<Border Margin="10" Padding="10" BorderBrush="Blue" BorderThickness="1" MouseDown="OnMouseDown" Width="200" Height="200">
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" TextWrapping="Wrap" Text="Click anywhere in here, the border should turn red" />
</Border>
<Border Margin="10" Padding="10" BorderBrush="Blue" BorderThickness="1" MouseDown="OnMouseDown" Width="200" Height="200">
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" TextWrapping="Wrap" Text="Click anywhere in here, the border should turn red" />
</Border>
<Border Margin="10" Padding="10" BorderBrush="Blue" BorderThickness="1" MouseDown="OnMouseDown" Width="200" Height="200">
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" TextWrapping="Wrap" Text="Click anywhere in here, the border should turn red" />
</Border>
</StackPanel>
And the output looks like this...
The problem now is that the "Border" is unable to recognize my MouseDown button. It doesnt register my mousedown anywhere inside the border, but only on the border itself. I want it so that if the user click anywhere inside, it should change my border color. How can i do that?
Please note that i need to eventually put content inside my border, be it a video, images, multiple UI controls, or whatever, so if user click anything inside this border, it should "select" my border and turn it red.
I experimented with other things like a Rectangle but Rectangle i cannot use because i am unable to put other UI elements or control in there.
Anyone know what is the correct way to do it?
Requirement:
within border selection, turn border red.
within border unselection, turn border back to blue.
border should eventually allow contents inside, such as the textblock, images, video, or anything.
Just add a transparent background to capture mouse clicks
<Border Background="Transparent" Margin="10" Padding="10" BorderBrush="Blue" BorderThickness="1" MouseDown="OnMouseDown" Width="200" Height="200">
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" TextWrapping="Wrap" Text="Click anywhere in here, the border should turn red" />
</Border>
Note that any controls inside the border could steal events away from the border. In that case you may need a transparent border over the top of everything, or handle routed events. or just use a ToggleButton instead and change its template.
<StackPanel VerticalAlignment="Top" Orientation="Horizontal">
<StackPanel MouseDown="OnMouseDown">
<Border Margin="10" Padding="10" BorderBrush="Blue" BorderThickness="1" Width="200" Height="200">
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" TextWrapping="Wrap" Text="Click anywhere in here, the border should turn red" />
</Border>
</StackPanel>
Wrap it inside container..
I have a problem on how to correctly set the Panel.ZIndex of a Popup inside a Grid. The goal is that when I click the Emergency button, a Popup window will display with an image on it and overlay (cover) the buttons (see screenshot below).
I have set the Grid Panel.ZIndex="0"and the Popup to Panel.ZIndex="1" However, the Popup window doesn't overlay the buttons.
This is the XAML implementation.
<StackPanel Background="Black">
<Grid Background="#253341" Panel.ZIndex="0">
<Popup HorizontalOffset="-5" VerticalOffset="0" IsOpen="False"
HorizontalAlignment="Left" VerticalAlignment="Top"
Name="EmergencyPopup" Placement="RelativePoint" AllowsTransparency="True"
PlacementTarget="{Binding ElementName=EmergencyButton}"
Width="1080" Height="1920" Panel.ZIndex="1">
<Border BorderBrush="Black" BorderThickness="2" CornerRadius="2">
<Grid>
<Image Source="{StaticResource EdenParkInfoImg}"/>
<Label FontWeight="Bold" Foreground="Red" HorizontalAlignment="Right" FontSize="25"
MouseLeftButtonDown="Label_MouseLeftButtonDown">close X</Label>
</Grid>
</Border>
</Popup>
</Grid>
</StackPanel>
Screenshot of the Popup window and buttons (the red box indicates that the image inside the Popup is behind the buttons)
Have I correctly set the Panel.ZIndex of the Grid and Popup? What is the correct way of doing it?
Any help is greatly appreciated.
I did find a way on how to solve the issue. In my Popup dialog xaml implementation, I set HorizontalOffset to 0 and VerticalOffset to 180. In that way, Popup dialog vertically overlays the buttons and ZIndex no longer matters. WPFUser is right, it should work without explicitly defining ZIndex.
<Popup HorizontalOffset="0" VerticalOffset="180" IsOpen="False" Width="1080"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="1920"
Name="EmergencyPopup" Placement="Top" AllowsTransparency="True">
<Border BorderBrush="Black">
<Grid>
<Image Source="{StaticResource EdenParkInfoImg}" />
<Label FontWeight="Bold" Foreground="Red" HorizontalAlignment="Right" FontSize="25"
MouseLeftButtonDown="Label_MouseLeftButtonDown" Margin="0,0,15,0">close X
</Label>
</Grid>
</Border>
</Popup>
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>
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>