I have a 2 column grid that I want to wrap with a <Button> now when I do that it totally screws the layout of the grid, how do I disable the style of the button so that the grid is clickable via the button but it looks the same.
When I start I have the following xaml
<Grid>
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="180*" />
<ColumnDefinition Width="296*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="{Binding image}" Margin="10,10,10,10"/>
<StackPanel Grid.Column="1">
<TextBlock Grid.Column="1" Text="{Binding hoursAgo}" FontSize="16" FontWeight="Light" FontStyle="Italic"></TextBlock>
<TextBlock FontSize="26.667" TextDecorations="Underline" Text="{Binding title}" TextWrapping="Wrap" Height="40" Width="295" HorizontalAlignment="Left" VerticalAlignment="Top" Foreground="#FF3253B8" Canvas.Top="22" Grid.Column="1" >News Title Goes here</TextBlock>
<TextBlock FontSize="21.333" Text="{Binding description}" TextWrapping="Wrap" d:LayoutOverrides="VerticalAlignment" Grid.Column="1" />
</StackPanel>
</Grid>
</Grid>
If I use expression blend to convert to a button it messes the source a bit, which is not what I want
<UserControl.Resources>
<Style x:Key="SelectedEntry" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="180*" />
<ColumnDefinition Width="296*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="{Binding image}" Margin="10,10,10,10"/>
<StackPanel Grid.Column="1">
<TextBlock FontSize="26.667" TextDecorations="Underline" Text="{Binding title}" TextWrapping="Wrap" Height="40" Width="295" HorizontalAlignment="Left" VerticalAlignment="Top" Foreground="#FF3253B8" Canvas.Top="22" Grid.Column="1" ><Run Text="News Title Goes here"/></TextBlock>
<TextBlock FontSize="21.333" Text="{Binding description}" TextWrapping="Wrap" d:LayoutOverrides="VerticalAlignment" Grid.Column="1" />
</StackPanel>
</Grid>
<ContentPresenter/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="FontWeight" Value="Light"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="FontStyle" Value="Italic"/>
</Style>
</UserControl.Resources>
<Button Content="{Binding hoursAgo}" Style="{StaticResource SelectedEntry}"/>
now the description is not showing in the grid.
Open Blend, right click the Grid that you want to turn into a Button and select Make Into Control.
Then in the popup window, select which control you want it to turn to, in your case, a Button. :) That's it.
Related
I have a powershell script which at some point creates a WPF form for some basic input from the user.
I have a ListBox with CheckBoxes where user selects necessary options, but it is disabled by default, and user needs to do some actions before it enables. As you can see from below XAML, the overall design is dark, so default disabled styling for ListBox looks pretty ugly. How do I need to change below XAML, so that when disabled, I can control at least the background? I know that I need to create a style template and add trigger that switches styles when ListBox is disabled, but I tried several approaches found online and none of them work.
Here's the XAML I'm using
<Window x:Name="MyLittleFormMainWindow" x:Class="MyLittleForm.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:MyLittleForm"
mc:Ignorable="d"
Title="My Little Form" Height="450" Width="800" FontFamily="OCRB" FontSize="14" Opacity="0.8" Background="#33000000" Foreground="Lime" BorderBrush="#05000000" WindowStyle="ToolWindow" BorderThickness="0" ResizeMode="NoResize">
<Grid Margin="0,10,4,0">
<Grid.RowDefinitions>
<RowDefinition Height="33*"/>
<RowDefinition Height="173*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="18*"/>
<ColumnDefinition Width="61*"/>
</Grid.ColumnDefinitions>
<Button x:Name="buttonGetFiles" Content="Press to enable" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="160" Height="48" Background="#F2323232" Foreground="#FFFDA100" FontSize="18" Grid.Column="0" Grid.Row="0"/>
<ListBox x:Name="checkBoxList" HorizontalAlignment="Left" Margin="10,10,10,10" VerticalAlignment="Top" Width="160" Height="200" ItemsSource="{Binding MyItemsListProperty}" SelectionMode="Multiple" Background="#F2323232" Foreground="#FFFDA100" Grid.Column ="0" Grid.Row="1" IsEnabled="False" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="2">
<CheckBox IsChecked="{Binding isChecked}" BorderBrush="#FF000A64" Background="Lime" Foreground="Lime" Content="{Binding Content}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Label x:Name="textLabel" Content="My Little Form" Grid.Column="1" Grid.Row ="0" HorizontalAlignment="Right" Margin="10,10,10,10" VerticalAlignment="Top" FontFamily="OCR A Extended" FontSize="42" Foreground="Lime" Height="48" />
</Grid>
</Window>
You have to define a style for ItemsPanelTemplate of the ListBox only.
Try this one as an example:
<Grid Margin="0,10,4,0">
<Grid.RowDefinitions>
<RowDefinition Height="33*"/>
<RowDefinition Height="173*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="18*"/>
<ColumnDefinition Width="61*"/>
</Grid.ColumnDefinitions>
<Button x:Name="buttonGetFiles" Content="Press to enable" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="160" Height="48" Background="#F2323232" Foreground="#FFFDA100" FontSize="18" Grid.Column="0" Grid.Row="0"/>
<ListBox x:Name="checkBoxList"
HorizontalAlignment="Left"
Margin="10,10,10,10"
VerticalAlignment="Top" Width="160" Height="200"
ItemsSource="{Binding MyItemsListProperty}"
SelectionMode="Multiple"
Foreground="#FFFDA100"
Grid.Column ="0" Grid.Row="1"
IsEnabled="False" >
<ListBox.Style>
<Style TargetType="ListBox">
<Setter Property="Background" Value="#F2323232"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding IsEnabled}" Value="False">
<Setter Property="Background" Value="#F2323232"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ListBox.Style>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel >
<StackPanel.Style>
<Style TargetType="StackPanel">
<Setter Property="Background" Value="#F2323232"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBox}}, Path=IsEnabled}" Value="False">
<Setter Property="Background" Value="#AA323232"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
</StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="2">
<CheckBox IsChecked="{Binding isChecked}" BorderBrush="#FF000A64" Background="Lime" Foreground="Lime" Content="{Binding Content}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Label x:Name="textLabel" Content="My Little Form" Grid.Column="1" Grid.Row ="0" HorizontalAlignment="Right" Margin="10,10,10,10" VerticalAlignment="Top" FontFamily="OCR A Extended" FontSize="42" Foreground="Lime" Height="48" />
</Grid>
I am new to wpf. I need to have a window that list all accounts added. But my application shows a double line below the "Accounts". Not sure what caused this. could someHow to fix this? Here is my xaml
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackPanel x:Name="StackPanel1" Grid.Row="0" HorizontalAlignment="Left" Height="150" VerticalAlignment="Top" Width="444">
<TextBlock x:Name="AddAccountTextBlock" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Height="60" Width="369" Text="Add account to allow for simple access to your company resources
" SnapsToDevicePixels="True"/>
<Button x:Name="AddAccount" Content="Add Account" HorizontalAlignment="Left" VerticalAlignment="Top" Width="140" RenderTransformOrigin="0.466,0.977" IsCancel="True" Height="40" Foreground="White" Background="Blue" Click="OnAddAccount"/>
</StackPanel>
<StackPanel x:Name="StackPanel2" Grid.Row="2" HorizontalAlignment="Left" Height="154" Width="444">
<TextBlock x:Name="AccountsTextBlock" TextWrapping="Wrap" Text="Accounts" Height="25" Width="68" FontSize="16" FontFamily="Tahoma"/>
<ListBox x:Name="accounts" Height="130" VerticalAlignment="Top">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Height" Value="100"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Name="_Border" BorderBrush="Gray" BorderThickness="0.5" SnapsToDevicePixels="true">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="_Border" Property="Background" Value="LightSkyBlue"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Row="0" Grid.Column="0" Width="100" Source="{Binding Path=imagePath}" />
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="0" Grid.Column="1" Text="{Binding Path=userInfo}"></TextBlock>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>
You may remove the borders of the ListBox by setting the BorderThickness property:
<ListBox x:Name="accounts" Height="130" VerticalAlignment="Top" Margin="100"
BorderThickness="0">
You may set it to 1,0,1,0 to remove only the top and bottom borders. The order is left, top, right, bottom.
Here is my XAML and I see a border around the grid and I am not sure how to remove it.
<Border
BorderBrush="#971c1c"
BorderThickness="5"
CornerRadius="5">
<Grid Background="#971c1c">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image
Width="20"
Height="20"
Margin="3"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="/DataSuite.Administration.Console.WinClient;component/Resources/Integration_Error.png" />
<ItemsControl
Grid.Column="1"
Margin="0,5"
BorderThickness="0"
FontSize="14"
Foreground="White">
<ListBoxItem>
<TextBlock Text="This is sample text for the error. Width will be set as per the value of message" />
</ListBoxItem>
<ListBoxItem>
<TextBlock Text="This is sample text for the error." />
</ListBoxItem>
<ListBoxItem>
<TextBlock Text="This is sample text for the error." />
</ListBoxItem>
</ItemsControl>
<Button
Grid.Column="2"
VerticalAlignment="Center"
Background="Transparent"
BorderThickness="0"
Foreground="White">
Dissmiss
<Button.Style>
<Style>
<Style.Triggers>
<Trigger Property="Control.IsMouseOver" Value="True">
<Setter Property="Control.Cursor" Value="Hand" />
<Setter Property="Control.Background" Value="Transparent" />
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Grid>
</Border>
I have removed the border from the Itemscontrol and also this xaml is part of usercontrol and I have set the Borderthickness of usercontrol to 0 as well
Here is output that I am seeing.
Rendered Image
The easiest way to do this is to set the margin on the grid to -1.
<Grid Background="#971c1c" Margin="-1">
Try to set background of the border instead of the grid.
<Border
Background="#971c1c"
BorderThickness="0"
CornerRadius="5">
<Grid>
</Grid>
</Border>
I'm trying to make the background of my ListBoxItems to be constituted of a ProgressBar, but the "Z-Index" thing is not seemingly working for me. I have read somewhere that Grid doesn't support Z-Index (like Canvas) and that by default elements are rendered in the order they are added. This is what apparently happens in my case too. But when I click on a listbox item, my TextBlock (see below) disappears, apparently because the ProgressBar comes to front. Interestingly, the other child controls (image and animation) do not disappear, so I'm kind of puzzled.
Here's my ListBox's ItemTemplate:
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Name="ListBoxGrid">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<ProgressBar Grid.Column="0" Grid.ColumnSpan="3" Background="White" Value="{Binding Path=SendProgress}" />
<Image Width="50" Stretch="Uniform" Grid.Column="0" HorizontalAlignment="Center" Margin="20,0,0,0" VerticalAlignment="Center" Source="{Binding Image}" />
<TextBlock FontSize="16" Grid.Column="1" VerticalAlignment="Center" Text="{Binding Path=ImageFilePath, Padding="20,0,0,0" />
<Canvas Grid.Column="2">
<Image Canvas.Left="25" Canvas.Top="25" Width="50" Height="50" Source="{Binding Status}" />
<my:LoadingAnimation HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Height="100" Canvas.Left="5" Canvas.Top="5" Visibility="{Binding IsSending, Converter={StaticResource BooleanToVisibilityConverter1}}" />
</Canvas>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
Panel.ZIndex property works fine for me Sample code:
<Grid>
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Panel.ZIndex="2">
<Button Name="goButton" Height="30" Width="50" Margin="0,10,0,50" Click="goButton_Click">GO!</Button>
<ProgressBar Name="progressBar" Width="300" Height="30" />
</StackPanel>
<Label VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="100" Content="SHOWTHIS" Panel.ZIndex="1"/>
</Grid>
Perhaps Style Datatriggers for visibility might be usefull in this case if i understood it well
Sample code for each element of your datatemplate:
<Image>
<Image.Style>
<Style TargetType="{x:Type Image}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsSending}" Value="True">
<Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsSending}" Value="False">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
I found this code which replaces the default select style with a custom style for the select ListBoxItem in a ListBox. However, there is still a little blue line on the left from the default style which I can't remove with any padding or margin changes.
How can I remove that blue line and completely determine the style of the selected ListBoxItem?
alt text http://tanguay.info/web/external/blueLineLeft.png
<Window x:Class="CodingContext.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:CodingContext"
Title="Window1" Height="300" Width="300">
<Window.Resources>
<DataTemplate x:Key="ItemTemplate" DataType="{x:Type local:Person}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Path=Name, StringFormat=Name: \{0\}}" />
<TextBlock Grid.Column="1" Text="{Binding Path=Age, StringFormat=Age: \{0\}}" />
</Grid>
</DataTemplate>
<DataTemplate x:Key="SelectedTemplate" DataType="{x:Type local:Person}">
<Grid Background="Yellow">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Foreground="Black" Grid.Row="0" Grid.Column="0" Text="Person" FontSize="14" FontWeight="Bold" />
<TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding Path=Name, StringFormat=Name: \{0\}}" />
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=Age, StringFormat=Age: \{0\}}" />
<TextBlock Grid.Row="2" Grid.Column="0" Text="Address" FontSize="14" FontWeight="Bold" />
<StackPanel Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" Orientation="Horizontal">
<TextBlock Text="{Binding Address}" />
<TextBlock Text="{Binding City, StringFormat= \{0\}}" />
<TextBlock Text="{Binding State, StringFormat= \{0\}}" />
<TextBlock Text="{Binding Zip, StringFormat= \{0\}}" />
</StackPanel>
</Grid>
</DataTemplate>
<Style TargetType="{x:Type ListBoxItem}" x:Key="ContainerStyle">
<Setter Property="ContentTemplate" Value="{StaticResource ItemTemplate}" />
<Setter Property="Margin" Value="5" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="ContentTemplate" Value="{StaticResource SelectedTemplate}" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<ListBox HorizontalContentAlignment="Stretch" Margin="10" x:Name="lstPeople" ItemsSource="{Binding People}" ItemContainerStyle="{StaticResource ContainerStyle}" />
</Window>
I'm pretty sure this is a bug, as several people have had this issue with the ListBoxItem template.
To fix, just add:
<Setter Property="Padding" Value="0,0,0,0"/>
to your ContainerStyle template. It's originally 2,0,0,0.
Have a look at this answer to a similar question. Basically, if you want to restyle the ListBox so that selected items have a different background colour, it's easier to simply change the "HighlightBrush" colour so that the selected item uses the colour you want.