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>
Related
I want used polygone to draw a form inside a button and then put it inside a stackpanel with a text but the result is deceiving...
this is my code:
<Button x:Name="button2" HorizontalAlignment="Left" Margin="27,164,0,0" VerticalAlignment="Top" Height="30" Width="75">
<Grid>
<StackPanel Orientation="Vertical">
<Canvas>
<Polygon
Points="0,-10 16,-10 20,-6 20,10 0,10 0,-10"
Stroke="Black"
StrokeThickness="1"
Fill="#4C87B3"/>
<Polygon
Points="2,-10 14,-10 14,-3 2,-3 2,-10"
Stroke="#d6d6c2"
StrokeThickness="1"
Fill="#d6d6c2"/>
<Polygon
Points="4,-9 6,-9 6,-4 4,-4 4,-9"
Stroke="#4C87B3"
StrokeThickness="1"
Fill="#4C87B3"/>
</Canvas>
<TextBlock Text="Save" FontSize="12" Foreground="White"/>
</StackPanel>
</Grid>
</Button>
the result:
and then in adition to that i want to give this figure some effect like the shadow shown in this picture below:
Since you only want to stack the Polygon elements on top of each other, it is sufficient to add them to a Grid. When wrap this Grid into a Viewbox, the icon will automatically scale, when setting e.g. Viewbox.Width. To prevent the icon from overlapping due to its negative positions, you have to add some Margin to the Grid that hosts the shapes.
To add a drop shadow simply add a DropShadowEffect to the outer Polygon.Effect.
<Button x:Name="button2" HorizontalAlignment="Left" Margin="27,164,0,0" VerticalAlignment="Stretch" Width="75"
Height="30">
<StackPanel>
<Viewbox Width="12" Stretch="Uniform">
<Grid Margin="0,10,0,0">
<Polygon
Points="0,-10 16,-10 20,-6 20,10 0,10 0,-10"
Stroke="Black"
StrokeThickness="1"
Fill="#4C87B3">
<Polygon.Effect>
<DropShadowEffect Opacity="0.9"
ShadowDepth="5"
Direction="315"
Color="Black"
BlurRadius="10" />
</Polygon.Effect>
</Polygon>
<Polygon
Points="2,-10 14,-10 14,-3 2,-3 2,-10"
Stroke="#d6d6c2"
StrokeThickness="1"
Fill="#d6d6c2" />
<Polygon
Points="4,-9 6,-9 6,-4 4,-4 4,-9"
Stroke="#4C87B3"
StrokeThickness="1"
Fill="#4C87B3" />
</Grid>
</Viewbox>
<TextBlock Text="Save" FontSize="12" Foreground="White" HorizontalAlignment="Center" />
</StackPanel>
</Button>
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>
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
This is my first time using WPF, I have a usercontrol with a ToolBar, and ToolBarPanels on that ToolBar. My problem is trying to right align the very last ToolBarPanel which contains some buttons.
http://imgur.com/n5v4YCw
I have scoured the interwebs and tried solutions (wrap it in a grid, dockpanel, stackpanel) but none have worked.
My XAML is:
<ToolBar
HorizontalAlignment="Left" Width="{Binding ActualWidth, ElementName=userControl}"
VerticalAlignment="Top"
Name="ToolBarPanel1"
UseLayoutRounding="False"
ToolBarTray.IsLocked="True">
<ToolBar.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF475B7E" Offset="1"/>
<GradientStop Color="#FFB9C3D5" Offset="0.427"/>
</LinearGradientBrush>
</ToolBar.Background>
.........
<ToolBarPanel ToolBar.OverflowMode="AsNeeded" Orientation="Horizontal" HorizontalAlignment="Right" >
<Button
Name="btnPrint"
Margin="5"
HorizontalAlignment="Right"
VerticalAlignment="Center"
BorderThickness="1"
IsEnabled="{Binding Path=AllowEdit}"
BorderBrush="#FF586A8B"
DockPanel.Dock="Right"
Visibility="{Binding Path=ControlVisibility.Print,
Converter={StaticResource BooleanToVisibilityConverter}}">
<Image Source="/component/Images/print-image.png"></Image>
<Button.ToolTip>
<ToolTip>
<TextBlock>Print Chart</TextBlock>
</ToolTip>
</Button.ToolTip>
</Button>
<Button
Name="btnCopy"
Margin="5"
HorizontalAlignment="Right"
VerticalAlignment="Center"
BorderThickness="1"
IsEnabled="{Binding Path=AllowEdit}"
BorderBrush="#FF586A8B"
Visibility="{Binding Path=ControlVisibility.Copy,
Converter={StaticResource BooleanToVisibilityConverter}}">
<Image Source="/component/Images/copy-image.png"></Image>
<Button.ToolTip>
<ToolTip>
<TextBlock>Copy Chart to Clipboard</TextBlock>
</ToolTip>
</Button.ToolTip>
</Button>
<Button
Name="btnInfo"
Margin="5"
HorizontalAlignment="Right"
VerticalAlignment="Center"
BorderThickness="1"
IsEnabled="{Binding Path=AllowEdit}"
BorderBrush="#FF586A8B"
Visibility="{Binding Path=ControlVisibility.Info,
Converter={StaticResource BooleanToVisibilityConverter}}">
<Image Source="/component/Images/help-image.png"></Image>
<Button.ToolTip>
<ToolTip>
<TextBlock>Chart Help</TextBlock>
</ToolTip>
</Button.ToolTip>
</Button>
</ToolBarPanel>
</ToolBar>
Well stretched grid with last columndefinition set to "*" should fulfill your goal. Also you can try using DockPanel and aligning like this:
<DockPanel>
<ToolBarPanel DockPanel.Dock="Left"/>
<ToolBarPanel DockPanel.Dock="Left"/>
<ToolBarPanel DockPanel.Dock="Left"/>
<!-- Last One -->
<ToolBarPanel DockPanel.Dock="Right"/>
</DockPanel>
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>