I have a quick (and most likely) easy question for which I unfortunately do not find a suitable solution. My requirements are as follows:
For the purpose of creating a navigation bar, I want to stack some buttons. For this purpose, I am using a stack panel.
Between each of the buttons, I want to have some space. I could of course set the margin for every button, however I find this solution not very robust and instead want to define the margin centrally.
What I therefore did is I defined a style within the stack panel and set the margin once. This works great with one issue: For the button I would love to use a style provided by Materialdesigninxaml. When I however set the style to the button, the margin style gets ignored.
Has anyone an idea or do I need to make use of a workaround?
Thank you guys for your help.
Here is my sample code which works as no Materialdesigninxaml style is defined:
<StackPanel.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Margin" Value="0 10 0 0"/>
<Setter Property="Height" Value="50"/>
<Setter Property="Width" Value="150"/>
</Style>
</StackPanel.Resources>
<Button>
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="Database" VerticalAlignment="Center"/>
<TextBlock Text="BUTTON 1"/>
</StackPanel>
</Button>
This is my code with a specified Materialdesigninxaml style which does not work:
<StackPanel.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Margin" Value="0 10 0 0"/>
<Setter Property="Height" Value="50"/>
<Setter Property="Width" Value="150"/>
</Style>
</StackPanel.Resources>
<Button Style="{DynamicResource MaterialDesignFlatButton}">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="Database" VerticalAlignment="Center"/>
<TextBlock Text="BUTTON 1"/>
</StackPanel>
</Button>
Related
I would like to build a validation text box, which would be a normal UWP TextBox wrapped within a StackPanel, which also contains a TextBlock. The intent is that a validation message can be shown beneath the text box when there is a validation error.
I know I can do this by creating a custom control, but this would require me to implement all the properties I need and create a bunch of dependency properties, etc.
I'm hoping there is an easier way, where I can just completely derive the text box, but override the display template for it and include a label beneath it.
You can get most of the way there in XAML using the built-in IDataErrorInfo-based validation machinery and defining a control template for the TextBox's Validation.ErrorTemplate. There's a pretty good article at this link:
The XAML from the article at the link above follows, also check out this discussion on WPF's built-in validation here.
<Style TargetType="{x:Type Label}">
<Setter Property="Margin" Value="5,0,5,0" />
<Setter Property="HorizontalAlignment" Value="Left" />
</Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Margin" Value="0,2,40,2" />
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<DockPanel LastChildFill="true">
<Border Background="OrangeRed" DockPanel.Dock="right" Margin="5,0,0,0"
Width="20" Height="20" CornerRadius="5"
ToolTip="{Binding ElementName=customAdorner,
Path=AdornedElement.(Validation.Errors)[0].ErrorContent}">
<TextBlock Text="!" VerticalAlignment="center" HorizontalAlignment="center"
FontWeight="Bold" Foreground="white" />
</Border>
<AdornedElementPlaceholder Name="customAdorner" VerticalAlignment="Center" >
<Border BorderBrush="red" BorderThickness="1" />
</AdornedElementPlaceholder>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have a series of button styles (add, edit, delete, etc.) that make use of the MahApps Metro cirucular button style but apply specific images to the button style. When I use any of the styles only once in a UserControl they work just fine and I get the anticipated look from the styles. However, when I use the styles more than once in a single UserControl, only one of the style instances acts as behaved, the others drop the image I am expecting to see.
I have tried naming the specific control instances (in case it was some sort of lifetime management issue) that are using the styles to see if this would fix the issue but it did not. I also tried creating multiple buttons that use the same style properties but do not use the style and that DID work and the buttons showed correctly, but I don't want to go that route as that would defeat the purpose of the styles.
Below is my code for the resource dictionary where I define the button styles. Please note that I have only shown the style for the add button as the other ones are basically the exact same I just change the image type and tool tip. That's why there is the circular button base that I use to define the majority of the style properties.
<!--Reference Dictionaries-->
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" /> Source="pack://application:,,,/MahApps.Metro;component/Styles/FlatButton.xaml" />
</ResourceDictionary.MergedDictionaries>
<!--Circular Control Button Base-->
<Style x:Key="CircularControlButtonBase" TargetType="Button" BasedOn="{StaticResource MahApps.Metro.Styles.MetroCircleButtonStyle}">
<Setter Property="Height" Value="30"/>
<Setter Property="Width" Value="30"/>
<Setter Property="Margin" Value="2"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="{DynamicResource GrayBrush1}"/>
<Setter Property="Foreground" Value="Black"/>
<Style.Triggers>
<!--IsMouseOver Trigger-->
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{DynamicResource AccentColorBrush4}"/>
<Setter Property="Foreground" Value="{DynamicResource AccentColorBrush}"/>
<Setter Property="BorderBrush" Value="{DynamicResource AccentColorBrush}"/>
<Setter Property="BorderThickness" Value="2"/>
</Trigger>
<!--IsEnabled Trigger-->
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{DynamicResource MahApps.Metro.Brushes.Badged.DisabledBackgroundBrush}"/>
</Trigger>
</Style.Triggers>
</Style>
<!--Add Button-->
<Style TargetType="Button" x:Key="AddButton" BasedOn="{StaticResource CircularControlButtonBase}">
<Setter Property="ToolTip" Value="Add"/>
<!--Icon Image-->
<Setter Property="Content">
<Setter.Value>
<Rectangle Width="20" Height="20" Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill">
<VisualBrush.Visual>
<iconPacks:PackIconMaterial Kind="Plus"/>
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.OpacityMask>
</Rectangle>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
And I consume the styles like this.
<UserControl x:Class ="TestClass"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!--The image on this button won't come through.-->
<Button Style="{DynamicResource AddButton}"/>
<!--The image on this button will come through.-->
<Button Style="{DynamicResource AddButton}"/>
</UserControl>
I would expect that the the plus sign image would come through on both buttons, instead of just the last button in the xaml code. Any help would be appreciated.
The IconPacks control inside your style will be only created once. You can use the IconPacks control inside the ControlTemplate and bind to the content which is the enum value to avoid this issue:
<Style x:Key="AddButton"
BasedOn="{StaticResource CircularControlButtonBase}"
TargetType="Button">
<Setter Property="ToolTip" Value="Add"/>
<Setter Property="Content" Value="{x:Static iconPacks:PackIconMaterialKind.Plus}"/>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<iconPacks:PackIconMaterial Width="20" Height="20" Kind="{Binding}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal">
<Button Style="{DynamicResource AddButton}"/>
<Button Style="{DynamicResource AddButton}"/>
<Button Style="{DynamicResource AddButton}"/>
</StackPanel>
Namespace are:
xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
How can I display a textbox beside a button like in this picture?
A Flyout would be suitable here.
<Button Content="Edit">
<Button.Flyout>
<Flyout Placement="Right">
<Flyout.FlyoutPresenterStyle>
<Style TargetType="FlyoutPresenter">
<Setter Property="Padding" Value="0"/>
<Setter Property="BorderThickness" Value="0"/>
</Style>
</Flyout.FlyoutPresenterStyle>
<TextBox Width="250" Height="100" TextWrapping="Wrap"/>
</Flyout>
</Button.Flyout>
</Button>
Play around with the styles to get the appearance you want.
I have a stackpanel which i fill with an textblock. I have an stackpanel.resources. I tried setting the background to transparent but it will make the whole style invisible (but the text not) and i tried using opacity. This does make my stackpanel slightly transparent but also the text within the stackpanel.
The stackpanel looks like this:
<StackPanel Orientation="Vertical" Margin="550,25,0,0">
<Border>
<TextBlock OpticalMarginAlignment="None">
<Run FontSize="24" Text="Product"></Run><LineBreak/>
<Run FontSize="18" Text="Artikelnummer: "></Run><LineBreak/>
<Run FontSize="18" Text="Omschrijving: "></Run><LineBreak/>
<Run FontSize="18" Text="Eenheid: "></Run>
</TextBlock>
</Border>
<StackPanel.Resources>
<Style TargetType="Border">
<Setter Property="Background" Value="#287d37" />
<Setter Property="Margin" Value="5" />
<Setter Property="Width" Value="400" />
<Setter Property="Height" Value="105" />
</Style>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="White" />
<Setter Property="Margin" Value="5" />
</Style>
</StackPanel.Resources>
</StackPanel>
Does anyone know how i can achieve my goal of setting the background of the stackpanel to something like opacity 0.25 but the text inside that stackpanel not?
Thanks in advance!
Specify the alpha channel (the first byte) in the case of hardcoded colors, or the opacity if you're using a brush:
<StackPanel Background="#44287d37">
...
</StackPanel>
or
<StackPanel>
<StackPanel.Background>
<SolidColorBrush Color="Blue" Opacity=".25"/>
</StackPanel.Background>
...
</StackPanel>
I am writing a Store app with XAML and C#. I want to use Border and ViewBox. I got border styled, so I do not have to set properties that many times. I set BorderThickness to 2, and color to White, but this causes problems in my Viewbox.
Here it is in XAML:
<Viewbox Grid.Row="1" Stretch="Uniform">
<Grid Width="600" Height="600">
<Grid.Resources>
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="White" />
<Setter Property="BorderThickness" Value="2" />
</Style>
<Style TargetType="Grid">
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="Width" Value="150" />
<Setter Property="Height" Value="150" />
</Style>
</Grid.Resources>
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<Grid>
<Border>
<Viewbox>
<TextBlock Text="T" />
</Viewbox>
</Border>
</Grid>
The result of this is:
The problem is the scaled border around the letter "T".
I do not want to remove above styling for Border in Grid.Resources. I found only one solution so far...
<Viewbox>
<Viewbox.Resources>
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="White" />
<Setter Property="BorderThickness" Value="0" />
</Style>
</Viewbox.Resources>
<TextBlock Text="T" />
... what would give correct result:
, but I do not want to put these lines after each ViewBoxes, because there will be many.
I also tried to make a component, what has this default "resource" of zero thick border, but that had bad scaling.
So my question is how to to remove that border?
You're right to use the zero value for BorderThickness. There just might be another element in the visual tree hierarchy that also holds a default value that causes this.
I can't test this right now, but I can recommend this tool to you:
http://blois.us/Snoop/
You can inspect the visual tree with this by dragging the crosshair above your running debug application. Every time I stumbled upon a problem like this I found it highly useful to see which controls really appear at runtime, because with xaml it can be really tough to know it all. Hope you can find it!