I implement MVVM in my project (Windows store app) using ICommand (because I don't understand the RelayCommand). How to bind command to Ellipse like button?
As far I know I can accomplish this by 2 method:
1/ Make Ellipse as Button Template then bind the command to button. I tried this method but it only works when I click the border of Ellipse.
2/ Add command to event PointerPressed of Ellipse which I don't have a clue.
<Button Grid.Column="0" Grid.Row="0" Command="{Binding GenerateLevel}">
<Button.Template>
<ControlTemplate>
<Ellipse Height="{Binding CircleDiameter[0]}" Width="{Binding CircleDiameter[0]}" Stroke="Crimson" StrokeThickness="10" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</ControlTemplate>
</Button.Template>
</Button>
Related
Trying to add two states to a button, first click opens a canvas, the second closes the canvas.
<ToggleButton x:Name="retailButton" Content="Button" Canvas.Left="203" Canvas.Top="107" Width="327" Height="83" RenderTransformOrigin="0.49,0.398" Visibility="Visible" Opacity="0" Click="retailButton_Click" IsEnabled="True" >
not sure about the code behind?
You could use binding and a converter
<UserControl.Resources>
<BooleanToVisibilityConverter x:Key="BoolToVis" />
</UserControl.Resources>
...
<Canvas Visibility="{Binding ElementName=ToggleCanvasVisibility, Path=IsChecked, Converter={StaticResource BoolToVis}}}"/>
<ToggleButton x:Name="ToggleCanvasVisibility"/>
This is very close to this post: Binding a Button's visibility to a bool value in ViewModel
I am trying to find a way of making Modern UI WPF (MUI) logo clickable so I can initiate a web navigation to a certain page.
The idea is to change the MUI project the minimum necessary and not cause any dependency over my application.
The logo is defined in the ModernWindow style as follows:
<!-- logo (visible only when LogoData is not null) -->
<Border Grid.Column="2" Background="{DynamicResource Accent}" Width="36" Height="36" Margin="8,0"
DataContext="{TemplateBinding LogoData}"
Visibility="{Binding Converter={StaticResource NullToVisibilityConverter}, ConverterParameter=inverse}">
<Path Data="{Binding}" Stretch="Fill" Fill="White" Width="24" Height="24" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
How can I wire the click event on this border to my application ModernWindow instance?
The simplest and, as far as I'm concerned the best way to implement click in your case:
Change your border by Button
Change your button's Style and ControlTemplate to make it look as you need
Define command binding to your view model, or implementation of Click event.
<Border ...>
...
<Border.InputBindings>
<MouseBinding Command="{Binding Path=MyClickCommand}" MouseAction="LeftClick" />
</Border .InputBindings>
</Border>
I am trying to create a floating button in my WPF application. Currently, I have the following:
<Grid>
<Button Style="{DynamicResource MetroCircleButtonStyle}" Background="#E0E010" Width="50" Height="50" Name="testBtn" Click="testBtn_Click" Margin="374,184,93,35">
<Rectangle Height="20" Width="20" RenderTransformOrigin="0.47,0.456">
<Rectangle.Fill>
<VisualBrush Visual="{StaticResource appbar_add}" />
</Rectangle.Fill>
</Rectangle>
</Button>
<ListBox Width="200" Height="200" Name="lbox1" BorderBrush="Black" BorderThickness="5">
<Grid Width="175">
<ScrollViewer CanContentScroll="False" VerticalScrollBarVisibility="Auto" Margin="107,0,0,0"></ScrollViewer>
</Grid>
</ListBox>
</Grid>
which has a list box with a scroll viewer and a button outside the list box. When I click the button it prints "Hello World" in the list box. I would like to add the button inside the list box and as I scroll down inside the list box have the button be floating. Is there any way to do this?
Note: I am a complete beginner when it comes to WPF.
EDIT: Here is essentially what I want:
So going off of #omarmallat's comment, the way to do this is
<Button x:Name="addRowButton"
Width="50"
Height="50"
Margin="1275,330,25,25"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Background="#2EFF00" />
I had a margin so the button wasn't directly in the corner and provided a little but of space. Make sure the button tag is inside your grid tag!
I have a WPF application that is borderless so I needed to create my own buttons for windows functions and needed to add a MouseDown event to allow application to move when clicked and dragged.
The document outline is:
Window
grid
canvas
grid
stackPanel - this is where my windows close max and min buttons are.
here is the code for the StackPanel:
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Top" Canvas.Left="689" Canvas.Top="5">
<TextBlock x:Name="Minimize" Text="0" FontFamily="Webdings" Foreground="Black" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0" MouseLeftButtonUp="Minimize_MouseLeftButtonUp"/>
<TextBlock x:Name="Maximize" Text="1" FontFamily="Webdings" Foreground="Black" Margin="5,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Right" MouseLeftButtonUp="Maximize_MouseLeftButtonUp"/>
<TextBlock x:Name="Close" Text="r" FontFamily="Webdings" Foreground="Black" Margin="5,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Right" MouseLeftButtonUp="Close_MouseLeftButtonUp"/>
</StackPanel>
When I add the MouseDown dragmove method, it cancels out the StackPanel and does not allow me to close the application as shown in the code above.
I think the document outline needs a specific order? need some help with maybe understanding how it prioritizes the event handlers and if I need to rearrange my document outline.
Calling .DragMove prevents the MouseLeftButtonUp from executing on a TextBlock, however the .Click event of a Button should work correctly.
If I remember correctly, the MouseDown event of a Button does not bubble up the UI tree, so the MouseDown event of the parent control (in this case, a StackPanel) does not get executed.
Since you are looking for the functionality of a Button using a different UI, I would recommend just using a <Button> that has it's Template overwritten.
For example,
<Style x:Key="MyButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<TextBlock Text="{TemplateBinding Button.Content}"
FontFamily="Webdings" Foreground="Black">
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
It can be used like this :
<Button x:Name="Minimize" Text="0"
Style="{DynamicResource MyButtonStyle}"
Click="Minimize_Click" ... />
I am trying to create a popup that opens similar to the window preview option in Windows 8 taskbar. Basically, when I click or hover on a button, it opens a popup with basic information just above the button. Here is an example.
Right now, I am able to open the popup at either the extreme left or extreme right side of the page, using the code below.
<Frame x:Name="PopUpFrame" HorizontalAlignment="Left" Visibility="Hidden" Height="400" Margin="10,10,0,0" Grid.Row="1" VerticalAlignment="Bottom" Width="400" Source="/BasicApp;component/StandingOrderPopUp.xaml" NavigationUIVisibility="Hidden"/>
I have 3 different buttons in the button bar, so I cannot set the fixed margin. I am trying to set the same in code but I am unable to get the absolute position and convert it to margin property. I am not sure, if there is a better solution either.
Edit:
Tried using popup but it doesn't open on button click.
<Popup x:Name="PopUpFrame" Placement="Top" PlacementTarget="{Binding ElementName=StandingOrderButton}" Width="400" Height="400">
<DockPanel Background="#770081a7">
<Canvas DockPanel.Dock="Bottom" x:Name="PopupButtonBar" Height="50" VerticalAlignment="Bottom">
<Button Height="30" Width="125" HorizontalAlignment="Right" VerticalAlignment="Center" Canvas.Top="10" Content="CLOSE" Foreground="White" Background="#ff0081a7" BorderBrush="White" FontFamily="Trebuchet MS" Canvas.Left="10" />
</Canvas>
<Label Margin="5,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" DockPanel.Dock="Top" Content="STANDING ORDERS" Foreground="#ffffffff"></Label>
<Grid DockPanel.Dock="Top">
<Border BorderThickness="2" BorderBrush="#FFff7a00"></Border>
<RichTextBox Margin="2" Foreground="#FF0081a7" FontFamily="Trebuchet MS" IsEnabled="False"/>
</Grid>
</DockPanel>
</Popup>
And here is the event handler.
Private Sub StandingOrder_Click(sender As Object, e As RoutedEventArgs)
PopUpFrame.Visibility = Windows.Visibility.Visible
End Sub
Edit:
Never mind. I am an idiot. Instead of setting IsOpen property, I set the visibility. :(
It works perfectly, although, I had to copy the whole design from the separate page to this one. Still better than nothing. Only problem now is if I click on something else, I will have to write code to make sure popup is closed.
You can use a Popup control, coupled with it's Placement property to display your popup based on the current location of your buttons.
<Popup Placement="Top" PlacementTarget="{Binding ElementName=yourButton}" ... />
Inside your Popup, you can place your UserControl or any content element which will act as the popup's content.
See here for further information on popup placements, and here for a tutorial on WPF Popup controls.
Think about using ContextMenu, and set it's content you whatever you want. Thats is the solution for you.
This is how i defined one of my popups:
<Popup x:Name="btnPowerPopup" Placement="Mouse" StaysOpen="False">
....
</Popup>
you can user from the code behind on a button click or something :
btnPowerPopup.IsOpen = true;
and when the job is done:
btnPowerPopup.IsOpen = false;
But StaysOpen="False" let's you close the PopUp when clicking somewhere else.