None of the previous solutions seem to be working. I have some heavily modified buttons that look like this:
And, as you can see, the text is too high in the button. It needs to be lowered. Changing the margin doesn't work. Can't find anything that will adjust where the type appears in the button. Here's the XAML:
<Button Grid.Row="0" x:Name="LaunchArmyEditor" Content="Run the General Staff Army Editor" Height="86" Width="600" Click="LaunchArmyEditor_Click" FontFamily="Amaltea WF" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center" BorderThickness="0,0,0,0" BorderBrush="{x:Null}" FontWeight="Bold" Cursor="Hand" Margin="0,-1,0,0" >
<Button.Background>
<ImageBrush ImageSource="TransVictorianButton.png" Stretch="None"/>
</Button.Background>
</Button>
<Button Grid.Row="1" x:Name="LaunchMapEditor" Content="Run the General Staff Map Editor" Height="86" Width="600" Click="LaunchMapEditor_Click" FontFamily="Amaltea WF" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center" BorderThickness="0,0,0,0" BorderBrush="{x:Null}" FontWeight="Bold" Cursor="Hand" >
<Button.Background>
<ImageBrush ImageSource="TransVictorianButton.png" Stretch="None"/>
</Button.Background>
</Button>
Any suggestions?
Make the button's content be a label/textbox, instead of an attribute. Then adjust control being used accordingly such as using Margin property as shown below:
<Button … >
<ContentControl>
<Label Content="Run the General Staff Map Editor" Margin="0,4,0,0"/>
</ContentControl>
<Button.Background>
<ImageBrush ImageSource="TransVictorianButton.png" Stretch="None"/>
</Button.Background>
</Button>
Related
I've been learning some coding and have received some great pointers here, so I thought I'd ask about my current endeavor.
I'm currently experimenting with a WPF app and would like to try to create something like this (pardon the color scheme... I just threw this together):
The desired outcome is:
Have a bordered area
The bordered area needs a background image
Programmatically changeable progress bar
Static text in various areas
Programmatically changeable text in various areas
I have no idea where to even begin on creating something like this. I'm thinking of it from the perspective of a graphics editor like Paint.Net where I'd create layers for each element. This may be the wrong way of thinking, but that's where I'm at.
Please remember I'm a novice, so you'll want to provide the "patiently explaining to a child who suffered head trauma" explanation.
Thanks!
Hello I have made a small sample.
Here are the XAML codes:
<StackPanel Orientation="Horizontal">
<Border BorderBrush="#FF3CFF00" BorderThickness="5,5,5,5" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="100,100,0,0">
<StackPanel>
<StackPanel.Background>
<ImageBrush ImageSource="/Pictures/circuit-1242111.jpg"/>
</StackPanel.Background>
<TextBox Margin="20,10,20,0" BorderBrush="{x:Null}" Background="{x:Null}" Text="103/250" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontSize="16"></TextBox>
<ProgressBar Margin="0,10,0,0" Height="10"></ProgressBar>
<Grid>
<Grid.Background>
<SolidColorBrush Color="#FF8A8A8A" Opacity="0.85"/>
</Grid.Background>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Text="Circuits"></TextBlock>
</Grid>
</StackPanel>
</Border>
<Border BorderBrush="#FF3CFF00" BorderThickness="5,5,5,5" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="100,100,0,0">
<StackPanel>
<StackPanel.Background>
<ImageBrush ImageSource="/Pictures/circuit-1242111.jpg"/>
</StackPanel.Background>
<TextBox Margin="20,10,20,0" BorderBrush="{x:Null}" Background="{x:Null}" Text="12/300" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontSize="16"></TextBox>
<ProgressBar Margin="0,10,0,0" Height="10"></ProgressBar>
<Grid>
<Grid.Background>
<SolidColorBrush Color="#FF8A8A8A" Opacity="0.85"/>
</Grid.Background>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Text="Switches"></TextBlock>
</Grid>
</StackPanel>
</Border>
<Border BorderBrush="#FF3CFF00" BorderThickness="5,5,5,5" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="100,100,0,0">
<StackPanel>
<StackPanel.Background>
<ImageBrush ImageSource="/Pictures/circuit-1242111.jpg"/>
</StackPanel.Background>
<TextBox Margin="20,10,20,0" BorderBrush="{x:Null}" Background="{x:Null}" Text="347/500" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontSize="16"></TextBox>
<ProgressBar Margin="0,10,0,0" Height="10"></ProgressBar>
<Grid>
<Grid.Background>
<SolidColorBrush Color="#FF8A8A8A" Opacity="0.85"/>
</Grid.Background>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Text="Resistors"></TextBlock>
</Grid>
</StackPanel>
</Border>
</StackPanel>
Here is the background picture I used:
I am trying to add icon inside small Button but it doesn't enters as desired,
here my xaml:
<Button x:Name="eye_button" BorderBrush="{x:Null}" Margin="234,0,0,0" Height="15" Width="15">
<materialDesign:PackIcon Kind="Eye" Foreground="Black" />
</Button>
Here how it's looks like:
The left squre it's the button, in the right it's the icon
Try this:
<Button x:Name="eye_button" BorderBrush="{x:Null}" Margin="234,0,0,0" HorizontalAlignment="Left">
<materialDesign:PackIcon Kind="Eye" Foreground="Black" Width="15" Height="15" />
</Button>
It should look like this at runtime:
<Button
Width="15"
Height="15"
Padding="0"
HorizontalAlignment="Center"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Background="Transparent"
BorderThickness="0"
Foreground="Red">
<materialDesign:PackIcon
Width="15"
Height="15"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="Black"
Kind="ArrowBack" />
</Button>
Make sure you put padding to 0
I have 3 regions namely Menu,Toolbar and Content. When a module(ie customer) is clicked in Menu view it will navigate to the respective view in content region, after editing the values in the textboxes I need to save that to DB. How to get the underlaying view model of the active view and send to DAL when save button is clicked in Toolbar view?.
Shell.xaml:
<Grid DockPanel.Dock="Left" Width="65" Margin="1">
<Border CornerRadius="1" BorderBrush="Black" BorderThickness="1">
<StackPanel Orientation="Vertical" Margin="1" >
<ContentControl Name="menuControl" PrismRegions:RegionManager.RegionName="{x:Static infra:RegionNames.MenuRegion}"/>
</StackPanel>
</Border>
</Grid>
<Grid DockPanel.Dock="Top" Margin="1">
<Border CornerRadius="1" BorderBrush="Black" BorderThickness="1" >
<StackPanel Orientation="Vertical" Margin="2">
<ContentControl Name="toolbarControl" PrismRegions:RegionManager.RegionName="{x:Static infra:RegionNames.ToolbarRegion}"/>
</StackPanel>
</Border>
</Grid>
<Grid DockPanel.Dock="Right" Margin="2">
<Border CornerRadius="1" BorderBrush="Black" BorderThickness="1">
<StackPanel Margin="5" >
<ContentControl Name="contentControl" DockPanel.Dock="Top" PrismRegions:RegionManager.RegionName="{x:Static infra:RegionNames.ContentRegion}"/>
</StackPanel>
</Border>
</Grid>
Menu.xaml:
<Button Grid.Row="0" Name="btnHome" Background="Transparent" Margin="1" ToolTip="Home" Command="{x:Static inf:ApplicationCommands.NavigationCommand}" CommandParameter="{x:Type mod:HomeView}">
<TextBlock Height="32" Width="32" Text ="">
<TextBlock.Background>
<ImageBrush Stretch="Fill" ImageSource="/Modules;component/Icons/home_32.png"/>
</TextBlock.Background>
</TextBlock>
</Button>
<Button Grid.Row="1" Name="btnBank" Background="Transparent" Margin="1" ToolTip="Bank" Command="{x:Static inf:ApplicationCommands.NavigationCommand}" CommandParameter="{x:Type mod:BankView}">
<TextBlock Height="32" Width="32" Text ="">
<TextBlock.Background>
<ImageBrush Stretch="Fill" ImageSource="/Modules;component/Icons/bank_64.png"/>
</TextBlock.Background>
</TextBlock>
</Button>
<Button Grid.Row="2" Name="btnCustomer" Background="Transparent" Margin="1" ToolTip="Customer" Command="{x:Static inf:ApplicationCommands.NavigationCommand}" CommandParameter="{x:Type mod:CustomerView}">
<TextBlock Height="32" Width="32" Text ="">
<TextBlock.Background>
<ImageBrush Stretch="Fill" ImageSource="/Modules;component/Icons/customer_128.ico"/>
</TextBlock.Background>
</TextBlock>
</Button>
<Button Grid.Row="3" Name="btnEmployee" Background="Transparent" Margin="1" ToolTip="Employee" Command="{x:Static inf:ApplicationCommands.NavigationCommand}" CommandParameter="{x:Type mod:EmployeeView}">
<TextBlock Height="32" Width="32" Text ="">
<TextBlock.Background>
<ImageBrush Stretch="Fill" ImageSource="/Modules;component/Icons/employee_128.png"/>
</TextBlock.Background>
</TextBlock>
</Button>
Toolbar.xaml:
<Button Grid.Column="0" Margin="1" Name="btnAdd" Height="35" Width="35" ToolTip="Add" Background="Transparent" Command="{Binding AddCommand}" CommandParameter="Add" >
<TextBlock Height="30" Width="30" Text ="">
<TextBlock.Background>
<ImageBrush Stretch="Fill" ImageSource="/Modules;component/Icons/plus_32.png"/>
</TextBlock.Background>
</TextBlock>
</Button>
<Button Grid.Column="1" Margin="1" Name="btnEdit" Height="35" Width="35" ToolTip="Edit" Background="Transparent" Command="{Binding EditCommand}" CommandParameter="Edit" >
<TextBlock Height="30" Width="30" Text ="">
<TextBlock.Background>
<ImageBrush Stretch="Fill" ImageSource="/Modules;component/Icons/pencil_32.png"/>
</TextBlock.Background>
</TextBlock>
</Button>
<Button Grid.Column="2" Margin="1" Name="btnSave" Height="35" Width="35" ToolTip="Save" Background="Transparent" Command="{Binding SaveCommand}" CommandParameter="Save" >
<TextBlock Height="30" Width="30" Text ="">
<TextBlock.Background>
<ImageBrush Stretch="Fill" ImageSource="/Modules;component/Icons/save_32.png"/>
</TextBlock.Background>
</TextBlock>
</Button>
<Button Grid.Column="3" Margin="1" Name="btnPrint" Height="35" Width="35" ToolTip="Print" Background="Transparent" Command="{Binding PrintCommand}" CommandParameter="Print" >
<TextBlock Height="30" Width="30" Text ="">
<TextBlock.Background>
<ImageBrush Stretch="Fill" ImageSource="/Modules;component/Icons/print_32.png"/>
</TextBlock.Background>
</TextBlock>
</Button>
UI Design:
Basically your view's state is entirely present in the viewmodel. In your scenario of Button being out side the viewmodel of the form to save what you can do is:
In tool bar viewmodel:
Raise an event that Save button is clicked
myEventAggregator.RaiseEvent<SaveButtonClicked>().Publish(args);
On viewmodel constructor:
subscribe for the event that you raise when you click on save button in toolbar region
myEventAggregator.GetEvent<SaveButtonClicked>().Subscribe(yourSubscriberDelegate);
On Exit of the form or cancel of form:
Unsubscribe for the event. (this makes sure you don't have multiple active forms saving the data at the same time)
myEventAggregator.GetEvent<SaveButtonClicked>().UnSubscribe(yourSubscriberDelegate);
For this you need Event aggregator knowledge of publish and subscribe. Find more details here
There is my button :
<Button Style="{DynamicResource MetroCircleButtonStyle}" HorizontalAlignment="Right" Grid.Column="3" Width="40" Height="40" Command="{Binding NewConnectionCommand}">
<Rectangle Width="20" Height="20">
<Rectangle.Fill>
<VisualBrush Stretch="Fill" Visual="{StaticResource appbar_add}" />
</Rectangle.Fill>
</Rectangle>
<Button.ToolTip>
<ToolTip ToolTipService.InitialShowDelay="5000">
<StackPanel>
<TextBlock FontWeight="Bold">Add connection</TextBlock>
<TextBlock>Open the dialog to create the new connection.</TextBlock>
</StackPanel>
</ToolTip>
</Button.ToolTip>
</Button>
I'm trying to set the initialShowDelay at 5000 ms like you guys can see, but the tooltip always show at the default time...
What I'm doing wrong ?
You will have to set ToolTipService.InitialShowDelay="5000" on the Button not on the Tooltip. It is on Button you want ToolTip to shown with delay
<Button ToolTipService.InitialShowDelay="5000>
I am using the MahApps Metro controls in a WPF application with their FlyOut control on the bottom of the window. I am using their MetroCircleButtonStyle button like so:
<Button Width="55"
Height="55"
VerticalAlignment="Top"
Style="{DynamicResource MetroCircleButtonStyle}">
<Rectangle Width="20"
Height="20">
<Rectangle.Fill>
<VisualBrush Stretch="Fill"
Visual="{StaticResource appbar_city}" />
</Rectangle.Fill>
</Rectangle>
</Button>
My question is how do I add Text below these icons in the flyout?
Steve
something like:
<Button Width="55"
Height="55"
VerticalAlignment="Top"
Style="{DynamicResource MetroCircleButtonStyle}">
<StackPanel Orientation="Vertical">
<Rectangle Width="20"
Height="20">
<Rectangle.Fill>
<VisualBrush Stretch="Fill"
Visual="{StaticResource appbar_city}" />
</Rectangle.Fill>
</Rectangle>
<TextBlock Text="Hello" />
</StackPanel>
</Button>
Update:
MetroCircleButtonStyle by itself does not accomodate for Text outside the Ellipse. It's Template is pretty much a Grid with 1 cell and 3 children on top of each other(Ellipse, Another Ellipse and top-most is the ContentPresenter). Text inside does not actually respond to any state change either, So text outside with this Style is as good as wrapping the Button without text with a TextBlock in say a StackPanel.
What you're looking for, you could use the AppBarButton. Do note the documentation states, Due to issues with this control, AppBarButton is due to be removed for v1.0 so use that as an example and build up your own control with a similar Style. Probably drop the ViewBox, if your Button sizes are fixed.
From Viv's answer, you can add margin on the textbox element to push the label down:
<Button Width="55"
Height="55"
VerticalAlignment="Top"
Style="{DynamicResource MetroCircleButtonStyle}">
<StackPanel Orientation="Vertical">
<Rectangle Width="20"
Height="20">
<Rectangle.Fill>
<VisualBrush Stretch="Fill"
Visual="{StaticResource appbar_city}" />
</Rectangle.Fill>
</Rectangle>
<TextBlock Text="Hello" Margin="0, 20, 0, 0" />
</StackPanel>
</Button>