<Button Name="captureImageBtn" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="71" Height="70" Click="captureImageBtn_Click" BorderBrush="#e8f4ff" BorderThickness="2">
<Button.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="35"/>
</Style>
</Button.Resources>
<StackPanel>
<Image Name="imageImg" Source="\Resources\light-icon-camera.png" Height="24"> </Image>
<TextBlock Margin="0, 5, 0, 0" Text="{x:Static local:Resources.Toolbar_Image}"></TextBlock>
</StackPanel>
</Button>
Using the code above, I have a round button with an image above the title.
Switching to a High contrast theme on windows 11, the buttons become square.
How do I get round buttons with High contrast enabled?
Related
So I have 2 similar problems with the below image. The image is of a UserControl that has been added to a viewbox inside another UserControl:
Image
The button in the top-left does not fill the whole of the grid cell, but the image within it fills the whole button .I have been trying out different methods of binding button images. This is why this is not the same for the other buttons in the grid. However I can't see how they should differ
The black images on the centre top, left, right, and bottom buttons don't fill their buttons. However, when editing the code, the designer shows them filling those buttons. The code for these is identical to the ContentControl above, but has an image path linking to a completely black image instead.
Was wondering if these problems might be related or have a similar fix? I've tried using extra viewboxes and stretch to fill/ alignment parameters but they seem to make no difference.
EDIT:
Implementing Location.xaml in parent UserControl:
<Viewbox Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" Margin="10 10 10 10">
<ContentControl Content="{Binding CurrentLocationViewModel}">
<ContentControl.Resources>
<DataTemplate DataType="{x:Type locationViewModel:SmallRoomViewModel}">
<locationView:SmallRoomView/>
</DataTemplate>
<DataTemplate DataType="{x:Type locationViewModel:LargeRoomViewModel}">
<locationView:LargeRoomView/>
</DataTemplate>
</ContentControl.Resources>
</ContentControl>
</Viewbox>
SmallRoomView.xaml (the UserControl in the image):
<Grid>
<Grid.Resources>
<Button x:Key="wallTile" x:Shared="false" PreviewMouseDown="OnMouseDown" Style="{StaticResource appWallTile}"/>
<Button x:Key="floorTile" x:Shared="false" PreviewMouseDown="OnMouseDown" Style="{StaticResource appFloorTile}"/>
<Button x:Key="doorTile" x:Shared="false" PreviewMouseDown="OnMouseDown" Style="{StaticResource appDoorTile}"/>
</Grid.Resources>
<Button Grid.Row="0" Grid.Column="0" PreviewMouseDown="OnMouseDown">
<Image Stretch="Fill" Source="{Binding tile0_0}"/>
</Button>
<ContentControl Grid.Row="0" Grid.Column="2" Content="{StaticResource doorTile}"/>
<ContentControl Grid.Row="0" Grid.Column="3" Content="{StaticResource wallTile}"/>
...
</Grid>
App.xaml:
<Style x:Key="appDoorTile" TargetType="Button" x:Shared="false">
<Setter Property="Content">
<Setter.Value>
<Image Stretch="Fill" Source="./AllResources/images/tiles/doorTile.png"/>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="appFloorTile" TargetType="Button" x:Shared="false">
<Setter Property="Content">
<Setter.Value>
<Image Stretch="Fill" Source="./AllResources/images/tiles/floors/floorTile.png"/>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="appWallTile" TargetType="Button" x:Shared="false">
<Setter Property="Content">
<Setter.Value>
<Image Stretch="Fill" Source="./AllResources/images/tiles/walls/wallTile.png"/>
</Setter.Value>
</Setter>
</Style>
I have 4 buttons on the screen. When i click one button i am loading Grid data on the same UI.
When I click 2nd button I am just clearing old data and binding new data for the corresponding grid.
I just want to highlight only one Button once i Clicked it.
I am using MVVM pattern so.. need to fix this issue only in XAML.
Example:
I clicked 1st button it will load data on the grid based on selection.
Now button 1 should be highlighted.
When I click on 2nd button. Button 1 should be in normal state and 2nd button should be highlighted.
Only one Button highlight should be in highlighted mode until we are on the view.
You should use WPF triggers. In your case it's IsPressed. Simple example:
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="Red"/>
<Setter Property="BorderBrush" Value="1"/>
</Trigger>
Here is a complete example that works for me
<Window.Resources>
<Style x:Key = "TriggerStyle" TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property = "IsPressed" Value = "True">
<Setter Property = "Background" Value = "Red" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Button x:Name="button" Style = "{StaticResource TriggerStyle}" Content="Button" HorizontalAlignment="Left" Margin="103,45,0,0" VerticalAlignment="Top" Width="75"/>
<Button x:Name="button1" Style = "{StaticResource TriggerStyle}" Content="Button" HorizontalAlignment="Left" Margin="163,130,0,0" VerticalAlignment="Top" Width="75"/>
</Grid>
If it still doesn't work then maybe you should post your xaml.
I think you are looking for RadioButtons.
<Window.Resources>
<ControlTemplate x:Key="RbTemplateKey" TargetType="RadioButton">
<ToggleButton IsChecked="{Binding IsChecked, Mode=TwoWay,RelativeSource={RelativeSource AncestorType=RadioButton, Mode=FindAncestor}}"/>
</ControlTemplate>
</Window.Resources>
<Grid>
<StackPanel Margin="141,148,161,0" Orientation="Horizontal" Background="AliceBlue">
<RadioButton Width="25" Height="25" Margin="10" Template="{StaticResource RbTemplateKey}"/>
<RadioButton Width="25" Height="25" Margin="10" Template="{StaticResource RbTemplateKey}"/>
<RadioButton Width="25" Height="25" Margin="10" Template="{StaticResource RbTemplateKey}"/>
<RadioButton Width="25" Height="25" Margin="10" Template="{StaticResource RbTemplateKey}"/>
</StackPanel>
</Grid>
Here is my control template for the button style.
<StackPanel Orientation="Horizontal">
<Image x:Name="EmailImage" Source="../Images/btn__icon_savedisk.png" Height="17" Width="17" Stretch="None" RenderOptions.BitmapScalingMode="NearestNeighbor" />
<TextBlock x:Name="EmailImageTxt" Margin="20,0,20,0" Foreground="White" Text="{x:Static res:Localize.SAVE}" Background="{x:Null}" />
</StackPanel>
My problem is when I get mouse pointer over the area with the space between image and text button(image and text) is not selecting. I need to have mouse focus on all over the buttons.
Thank you for your help.
Set Background="Transparent" to stackpanel and it works as expected.
An control with no background is usually called as non-hittable in XAML terms. So it is must to set a background to make the object respond to hits.
<Button VerticalAlignment="Center" HorizontalAlignment="Center">
<Button.Template>
<ControlTemplate>
<StackPanel x:Name="stackpanel" Orientation="Horizontal">
<Image x:Name="EmailImage" Source="Black.jpg" Height="17" Width="17" Stretch="None" RenderOptions.BitmapScalingMode="NearestNeighbor" />
<TextBlock x:Name="EmailImageTxt" Margin="20,0,20,0" Foreground="Black" Text="gdfgdg}" Background="{x:Null}" />
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red" TargetName="stackpanel"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
In my app, when i am clicking on a button btn_setting this convas visibility is visible so it is showing like a popup having multiselect list with OK and Cancel buttons but the problem i am facing is that i want to add items in multiselectlist dynamically with checkbox border colour blue and foreground color to be black and the most important after every item i want a horizontal blue-line as a separator between two items.
I put foreground ="Black" for MultiSelectList but itis showing the white colour for the items.
<Canvas x:Name="Setting_popup" Width="485" Height="770" Visibility="Collapsed">
<Border Margin="10" >
<StackPanel Background="White">
<toolkit:MultiselectList x:Name="Setting_list" Background="Blue" Width="456" Height="700" FontWeight="Bold" Foreground="Black">
<CheckBox Content="Celsius" />
<CheckBox Content="Fahrenheit"/>
<CheckBox Content="Kelvin"/>
<CheckBox Content="Rankine"/>
</toolkit:MultiselectList>
<StackPanel Orientation="Horizontal">
<Button x:Name="btn_OK" Content="Ok" Width="223" HorizontalAlignment="Left" Foreground="White" Background="#FF3498DB" />
<Button x:Name="btn_Cancel" Content="Cancel" Width="223" HorizontalAlignment="Right" Foreground="White" Background="#FF3498DB" Click="Button_Click_1" />
</StackPanel>
</StackPanel>
</Border>
</Canvas>
You can change the check boxes style, for example:
<phone:PhoneApplicationPage.Resources>
<Style x:Key="CheckBoxStyle1" TargetType="CheckBox">
<Setter Property="BorderBrush" Value="Blue"/>
<Setter Property="Foreground" Value="Black"/>
</Style>
</phone:PhoneApplicationPage.Resources>
And then set the style to each check box:
<toolkit:MultiselectList x:Name="Setting_list" Width="456" Height="400" >
<CheckBox Content="Celsius" Style="{StaticResource CheckBoxStyle1}" />
<CheckBox Content="Fahrenheit" Style="{StaticResource CheckBoxStyle1}"/>
<CheckBox Content="Kelvin" Style="{StaticResource CheckBoxStyle1}"/>
<CheckBox Content="Rankine" Style="{StaticResource CheckBoxStyle1}"/>
</toolkit:MultiselectList>
I am trying to set the HorizontalAlignment of a button to the the right, but the button will change position. can someone please tell me what i am doing wrong. Thanks everyone in advance.
here is what i have tried so far:
1). DockPanel.Dock="Right"
2). HorizontalAlignment="Right"
<DockPanel Grid.Row="1">
<TextBlock Width="{Binding ActualWidth, ElementName=CanColorBar}" >
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Background" Value="SkyBlue"/>
</Style>
</TextBlock.Style>
<InlineUIContainer>
<Button x:Name="btnAcceptMerge" Content="Accept Merge"/>
</InlineUIContainer>
<Run Text=" "/>
<InlineUIContainer>
<Button x:Name="btnCancel" Content="Cancel Merge" Click="btnCancel_Click"/>
</InlineUIContainer>
</TextBlock>
</DockPanel>
Your problem is that you have all your buttons inside the TextBlock. This is not a very optimal or good layout. Try this instead:
<DockPanel Grid.Row="1" Background="SkyBlue" Width="{Binding ActualWidth, ElementName=CanColorBar}">
<Button x:Name="btnAcceptMerge" Content="Accept Merge" DockPanel.Dock="Left"/>
<Button x:Name="btnCancel" Content="Cancel Merge" Click="btnCancel_Click" DockPanel.Dock="Right"/>
<TextBlock Text=""/>
</DockPanel>