In my project, we want a combo box with button like Visual studio " Start button".
The button will have a down arrow . on click of that the other options will be displayed.
Each of the drop down item is a button.
Please have a look at the screenshot.
I was looking for a suitable control but could not find a exactly what I need.
Any suggestion? Any tutorial will be wonderful.
Thanks.
I would suggest you to use the RibbonSplitButton from the Ribbon Control. The RibbonSplitButton already includes the down arrow.
Here is a working example.
<RibbonTab Header="Wildchild_SO">
<RibbonGroup Header="StackOverFlow">
<RibbonSplitButton x:Name="btnStartMain" Label="Start" SmallImageSource="Images/add64px.png">
<RibbonMenuItem x:Name="btnStart" Click="btnStart_Click" Header="Start Test" ImageSource="Images/add64px.png"/>
<RibbonMenuItem x:Name="btnStop" Click="btnStop_Click" Header="Stop Test" ImageSource="Images/cross64px.png" />
</RibbonSplitButton>
</RibbonGroup>
</RibbonTab>
Check this out...enter image description here
<Button Background="GhostWhite">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Viewbox Width="20" Height="20">
<Canvas Width="24" Height="24">
<Path Data="M8,5.14V19.14L19,12.14L8,5.14Z" Fill="Green" />
</Canvas>
</Viewbox>
<Label Grid.Column="1" Content="MyButton"/>
<Viewbox Grid.Column="2" Width="20" Height="20">
<Canvas Width="24" Height="24">
<Path Data="M7,10L12,15L17,10H7Z" Fill="Black" />
</Canvas>
</Viewbox>
Related
I have this WPF button in my StackPanel:
<StackPanel Grid.ColumnSpan="6" Grid.Row="12" Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Center" Background="LightGray" Height="40">
<Button x:Name="btnSave" Click="btnSave_Click" Content="{x:Static res:Strings.ToolPanelEditView_Button_Save}" HorizontalAlignment="Right" />
</StackPanel>
For some reason, the button shows on the left although I set its HorizontalAlignment to Right:
How can I make my save button show on the right?
P.S. when I change the StackPanel's HorizontalAlignment to Right instead of Stretch, the button does show on the right like it should (but then the gray background of the StackPanel does not stretch either...
I think that a Grid is more appropriate for your case
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Center" Background="LightGray" Height="40">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Button x:Name="btnSave" Grid.Column="1" Content="Save" HorizontalAlignment="Right" />
<!--Your Other Button Grid.Column="2"-->
</Grid>
or you could as well replace the stackPanel with a DockPanel
You can use DockPanel as container, stretch it and dock your button to the right side
<DockPanel Grid.ColumnSpan="6" Grid.Row="12" HorizontalAlignment="Stretch" VerticalAlignment="Center" Background="LightGray" Height="40">
<Button Content="Save" DockPanel.Dock="Right"/>
<Button Content="Cancel" DockPanel.Dock="Right"/>
</DockPanel>
I Have a little WPF window that contains 3 buttons with image and TextBlock like this :
<Button x:Name="cmdPrint" Margin="5" VerticalAlignment="Center" Grid.Column="2"
ToolTip="Print a simulation"
MouseMove="MouseMouveHandler"
Click="ButtonClickHandler" Height="36">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="70"/>
</Grid.ColumnDefinitions>
<Image Source="images\print.png" Grid.Column="0" VerticalAlignment="Center"
Margin="2"/>
<TextBlock Text="_Print" Grid.Column="1" Foreground="DarkBlue"
VerticalAlignment="Center" Margin="2"/>
</Grid>
</Button>
As you can see , the button is customized, so, the following code doesn’t work :
<Button Name="cmdPrint " Content="_Print"></Button>
Is it possible to Fire Print button when i Press ‘P’ key ?
Thank you in advance.
Use label instead of text block will work for you
Click="ButtonClickHandler" Height="36" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="70"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" VerticalAlignment="Center"
Margin="2"/>
<Label Content="_Print" Grid.Column="1" Foreground="DarkBlue"
VerticalAlignment="Center" Margin="2" />
</Grid>
</Button>
I try to achieve a simple menubar in WPF.
Here is the XAML:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<DockPanel>
<DockPanel Background="Black" VerticalAlignment="Top" LastChildFill="True" DockPanel.Dock="Top" Height="28">
<ToggleButton Content="--" Visibility="Collapsed" />
<StackPanel Orientation="Horizontal">
<Button Content="Add" />
<Button Content="Expand" />
</StackPanel>
<StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
<TextBox Text="Search" MinWidth="80" Width="200" />
<Button Content="X" Margin="0,1,50,0" />
</StackPanel>
</DockPanel>
</DockPanel>
</Page>
It looks good, but when I resize the page to a smaller width, the last child (the Stackpanel with the search textbox) is hiding behind the left items.
Like this:
http://s9.postimage.org/m0tkrobwd/printscreen.png
It would be good if the textbox would resize itself if it has enough space to achieve its MinWidth...Is it possible?
The tricky thing is to give a Control (in your case the SearchTextBox) an alignment but still catch the available space up to MaxWidth. Thanks to this answer.
<DockPanel>
<DockPanel Background="Black" DockPanel.Dock="Top" Height="28">
<ToggleButton DockPanel.Dock="Left" Content="--" Visibility="Collapsed" />
<StackPanel DockPanel.Dock="Left" Orientation="Horizontal">
<Button Content="Add" />
<Button Content="Expand" />
</StackPanel>
<Button DockPanel.Dock="Right" Content="X" />
<Border Name="Container">
<TextBox Text="Search" HorizontalAlignment="Right"
Width="{Binding ElementName=Container, Path=ActualWidth}" MaxWidth="200" />
</Border>
</DockPanel>
</DockPanel>
Container could be another Control too.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition MaxWidth="200" MinWidth="80"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ToggleButton Content="--" Visibility="Collapsed" />
<Button Content="Add" Grid.Column="1"/>
<Button Content="Expand" Grid.Column="2"/>
<TextBox Text="Search" Grid.Column="4"/>
<Button Content="X" Margin="0,1,50,0" Grid.Column="5" />
</Grid>
Instead of giving MaxWidth and MinWidth to TextBox give it to Grid Column.I hope this will help.
Hi Set MaxWidth and MinWidth for the TextBox Not Width. If you will set the Width then it has highest precedence and hence MinWidth won'nt come into act.I hope this will help.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ToggleButton Content="--" Visibility="Collapsed" />
<Button Content="Add" Grid.Column="1"/>
<Button Content="Expand" Grid.Column="2"/>
<TextBox Text="Search" MinWidth="80" MaxWidth="600" Grid.Column="3" ClipToBounds="True" />
<Button Content="X" Margin="0,1,50,0" Grid.Column="4"/>
</Grid>
Its just because of the size of page is not enough for showing both stackpanel on page. for this you can use the minimum size of the page. that will prevent the damages of the control hiding .
and its also up to you what design you want. you can either use grid rather then stackpanles.
I'm developing a windows phone application. I'm new in WP7 app development. In my app I'm using an usercontrol and I have changed it's background image through following process shown in my code. But the background image is not changing. Can anyone help me ?
Here is my code snippet :
<Grid>
<Image Source="\assests\backgroungimages\appBackground2.jpg" Stretch="UniformToFill"/>
<StackPanel x:Name="LayoutRoot" Width="480" Height="306" Background="Black">
<TextBlock x:Name="ApplicationTitle" Text="Sign In" Style="{StaticResource PhoneTextNormalStyle}" Foreground="#CBF7FA" FontSize="30"/>
<toolkit:PhoneTextBox Hint="UserName" Name="txtUsername" Width="auto" HintStyle="{StaticResource HintCustomStyle}"></toolkit:PhoneTextBox>
<toolkit:PhoneTextBox Hint="Password" Name="txtPassword" Width="auto" HintStyle="{StaticResource HintCustomStyle}"></toolkit:PhoneTextBox>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Button Content="Sign In" Name="btnSignIn" Width="auto" Grid.Column="0" Grid.Row="0">
<Button.Background>
<ImageBrush ImageSource="\assests\backgroungimages\btnImage.jpg" Stretch="UniformToFill"></ImageBrush>
</Button.Background>
</Button>
<Button Content="Cancel" Name="btnCancel" Width="auto" Grid.Column="1" Grid.Row="0">
<Button.Background>
<ImageBrush ImageSource="\assests\backgroungimages\btnImage.jpg" Stretch="UniformToFill"></ImageBrush>
</Button.Background>
</Button>
</Grid>
</StackPanel>
</Grid>
Set grid background to
<Grid.Background>
<ImageBrush ImageSource="\assests\backgroungimages\appBackground2.jpg"/>
</Grid.Background>
I'm working on a dataform in Silverlight 4 and would like to group elements by section, with a title for each. The title consists of a TextBlock followed by a horizontal line. The line runs until the edge of the form.
I've tried the following (from this thread: http://forums.silverlight.net/forums/p/77813/183885.aspx), without success:
<StackPanel Orientation="Horizontal"/>
<TextBlock Text="Section title" />
<Line X1="0" Y1="0" X2="1" Y2="0" Stretch="Fill" Stroke="Black" />
</StackPanel>
Any idea why this isn't working?
Thanks!
How about using Border instead with a height of 1
I was curious about your post, so I tried it for myself. I was unable to get the line to stretch also when using a StackPanel. Although, I was able to get it to work with a Grid:
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Section title" HorizontalAlignment="Right" VerticalAlignment="Center" />
<Line Grid.Row="0" Grid.Column="1" X1="0" Y1="0" X2="1" Y2="0" Stretch="Fill" Stroke="Black" StrokeThickness="1" />
</Grid>