I want that all Buttons in a StackPanel have the same style.
Is there a similar possibility like in HTML / CSS?
For example, this makes in HTML the text of all buttons in the div with the class myBox blue:
CSS
.myBox Button{
color: blue;
}
HTML
<div class="myBox">
<button type="button">1</button>
<button type="button">2</button>
<button type="button">3</button>
</div>
When I have now this StackPanel, how can I make all Button text blue?
<StackPanel Orientation="Vertical" x:Name="ManagerMenu">
<Button x:Name="1" Content="1" />
<Button x:Name="2" Content="2" />
<Button x:Name="3" Content="3" />
</StackPanel>
You can do this by placing a default (= without an x:Key) Button style inside the stackpanel:
<StackPanel Orientation="Vertical" x:Name="ManagerMenu">
<StackPanel.Resources>
<Style TargetType="Button">
<Setter Property="Foreground" Value="Blue" />
...
</Style>
</StackPanel.Resources>
<Button x:Name="1" Content="1" />
<Button x:Name="2" Content="2" />
<Button x:Name="3" Content="3" />
</StackPanel>
But you may want to base it on a pre-existing style for buttons or it will look rather flat.
You can create a resource tag and then use this to multiple elements.
Take a look at this.
https://msdn.microsoft.com/en-us/windows/uwp/controls-and-patterns/styling-controls
If you want to use existing style and apply it to all buttons:
<StackPanel>
<StackPanel.Resources>
<Style TargetType="Button" BasedOn="{StaticResource MyButtonStyle}"/>
</StackPanel.Resources>
<Button x:Name="1" Content="1" />
<Button x:Name="2" Content="2" />
<Button x:Name="3" Content="3" />
</StackPanel>
Related
I am creating a keypad using a UniformGrid. The keypad has the usual 0-9 buttons, plus a 'Backspace' button. I want the 'Backspace' button to be smaller than the numeric buttons, and so I have applied a RenderTransform to it. All this works fine.
However, I additionally would like the 'Backspace' button to be repositioned (realigned) Right and Bottom within the UniformGrid cell, so that it is away from the numeric buttons.
Below is an image with the red arrow indicating where I would like to move the 'Backspace' button.
I have tried placing the 'Backspace' button inside a ContentControl and setting the HorizontalContentAlignment and VeriticalContentAlignment to Right and Down respectively, but this doesn't work.
Here is some sample XAML:
<UniformGrid Columns="3" Rows="4">
<Button Content="1" />
<Button Content="2" />
<Button Content="3" />
<Button Content="4" />
<Button Content="5" />
<Button Content="6" />
<Button Content="7" />
<Button Content="8" />
<Button Content="9" />
<Button />
<Button Content="0" />
<!--<ContentControl HorizontalContentAlignment="Right" VerticalContentAlignment ="Bottom">-->
<Button Content="X">
<Button.RenderTransform>
<ScaleTransform ScaleX=".75" ScaleY=".75" />
</Button.RenderTransform>
</Button>
<!--</ContentControl>-->
</UniformGrid>
Can this can be done?
Try RenderTransformOrigin
<Button Content="X" RenderTransformOrigin="1, 1">
<Button.RenderTransform>
<ScaleTransform ScaleX=".75" ScaleY=".75" />
</Button.RenderTransform>
</Button>
It should work, however I can't test right now.
Is there a simple way to pass an object of type Color as CommandParameter in WPF?
I have a list of buttons which should change e.g. the background-color of my application.
The buttons would look like:
<Button Command={Binding SetBackgroundColor} CommandParameter={Color.Red} Background="Red" />
<Button Command={Binding SetBackgroundColor} CommandParameter={Color.Green} Background="Green" />
<Button Command={Binding SetBackgroundColor} CommandParameter={Color.White} Background="White" />
<Button Command={Binding SetBackgroundColor} CommandParameter={???} Background="#FF00FF" />
and on click on the colored button, the color should be changed.
Any ideas, patterns, best-practices, how-tos or workarounds for this?
You could write
<Button CommandParameter="{x:Static Colors.Red}" ... />
or
<Button ...>
<Button.CommandParameter>
<Color>#FF00FF</Color>
</Button.CommandParameter>
</Button>
or use a color resource:
<Window.Resources>
<Color x:Key="myColor">#FF00FF</Color>
...
</Window.Resources>
...
<Button CommandParameter="{StaticResource myColor}" ... />
This is recurring problem I'm going into. How to match size of elements in WPF? Let's look at the following scenario:
<Grid>
<Popup>
<StackPanel>
<Button x:Name="btn1" />
<Button x:Name="btn2" />
<Button x:Name="btn3" />
</StackPanel>
</Popup>
<Border x:Name="border1">
Ala ma kota
</Border>
</Grid>
Now I'd like the btn1, btn2 and btn3 to be at least as wide as border1; contents of border changes dynamically, so no measuring and hardcoding is acceptable.
How can I achieve that?
Bind the buttons' Width property to the Border's Width property.
Something like:
<Button x:Name="btn1" Width="{Binding ElementName=border1, Path=Width}" />
I currently have an example that embeds an image object inside of a button.
the xaml looks like this:
<Button Height="194" HorizontalAlignment="Left"
Margin="23,27,0,0" Name="button1" VerticalAlignment="Top" Width="216"
Click="button1_Click">
<Image Name="image1" Stretch="Fill"
Source="/WPFButtonEmbedded;component/BenderInSpaceFace.png"
Height="105" VerticalAlignment="Bottom" Width="158" />
</Button>
However, when I try to recreate this myself i seem to get an error. I though that maybe they were binded togeather but looking at the example it doesnt seem that way.
Also the "image1" is an image that i added by clicking add exising item.
Any comments or suggestions are appreciated.
Thanks.
if you need to set image as Content
you can do it by setting style in resource
<Window.Resources>
<Image x:Key="Img" Source="/WPFButtonEmbedded;component/BenderInSpaceFace.png" Stretch="Fill"/>
<Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Content" Value="{StaticResource Img}" />
</Style>
</Window.Resources>
then you can set the Style of the Button
<Button Style="{StaticResource ButtonStyle}" />
How can I add Vertical separator to WPF Ribbon, to RibbonGroup? I have tried something like that, but i got horizontal separator istead of vertical.
<r:RibbonGroup>
<r:RibbonButton Command="{StaticResource SomeButton}" />
<r:RibbonSeparator></r:RibbonSeparator>
<r:RibbonToggleButton IsChecked="False" Command="{StaticResource AnotherButton}"/></r:RibbonToggleButton>
</r:RibbonGroup>
So how can I make vertical separator?
This is how I would do it.
<ribbon:RibbonGroup.Resources>
<!-- Vertical Separator-->
<Style TargetType="{x:Type ribbon:RibbonSeparator}"
x:Key="KeyRibbonSeparatorVertical">
<Setter Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="90"/>
</Setter.Value>
</Setter>
</Style>
</ribbon:RibbonGroup.Resources>
It looks like this doesn't work in the latest version (3.5.40729.1) anymore. The RibbonSeparator also doesn;t work, but you can use:
<Ribbon:RibbonControlGroup Height="55" Margin="5" Width="1" MinHeight="55" MaxWidth="1"/>
You can wrap what you have in a RibbonGroup, a vertical separator is created to the right of the group.
All I did was wrapped the first button in a RibbonGroup.
<ribbon:RibbonTab x:Name="HomeTab"
Header="Home">
<ribbon:RibbonGroup x:Name="Group1"
Header="Group1">
<ribbon:RibbonGroup>
<ribbon:RibbonButton x:Name="Button1"
LargeImageSource="Images\LargeIcon.png"
Label="Button1" Margin="-5" />
</ribbon:RibbonGroup>
<ribbon:RibbonButton x:Name="Button2"
SmallImageSource="Images\SmallIcon.png"
Label="Button2" />
<ribbon:RibbonButton x:Name="Button3"
SmallImageSource="Images\SmallIcon.png"
Label="Button3" />
<ribbon:RibbonButton x:Name="Button4"
SmallImageSource="Images\SmallIcon.png"
Label="Button4" />
</ribbon:RibbonGroup>
</ribbon:RibbonTab>
You can use a RibbonLabel, which can host any control in a RibbonGroup. It comes in very handy!
For a vertical line separator, you can try this:
<ribbon:RibbonLabel>
<Rectangle Height="56" Margin="2,0" Stroke="Silver"/>
</ribbon:RibbonLabel>
(Of course, you can style it as you see fit for the app..)
Works with me-
<my:RibbonSeparator Margin="5,0" Width="70" BorderBrush="Navy" BorderThickness="2">
<my:RibbonSeparator.RenderTransform>
<RotateTransform Angle="90" />
</my:RibbonSeparator.RenderTransform>
</my:RibbonSeparator>
This worked for me:
<Border Width="1" Margin="3" Height="175" Visibility="Visible" Background="#FFB9C9DA" />