WPF styling . Have no idea how to do it - wpf

I am trying to make an image button in WPF based on the following article
Custom button template in WPF
The problem with this is that I have No Idea how to make the image to become grayscale when disabling the button. So I am loading two images, But I can not load a second images into ButtonProperties.
So my idea was to load an rgb and greyscale image, and as I disable the button one image is hidden and another shown, and vice versa. and also the text to get greyed out. As I think, this coulde be done very nicely with triggers.
Here is my code:
a) style
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Width="20"
Name="imgEnabled"
Source="{Binding Path=(ib:ButtonProperties.Image), RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}"></Image>
<Image Width="20"
Name="imgDisabled"
Source="{Binding Path=(ib:ButtonProperties.Image), RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}"></Image>
<ContentPresenter Content="{Binding Path=Content, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}"></ContentPresenter>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
b) code:
public class ButtonProperties:DependencyObject
{
public static readonly DependencyProperty ImageProperty =
DependencyProperty.Register("Image",
typeof(ImageSource),
typeof(ButtonProperties),
new UIPropertyMetadata((ImageSource)null));
public static ImageSource GetImage(DependencyObject obj)
{
return (ImageSource)obj.GetValue(ImageProperty);
}
public static void SetImage(DependencyObject obj, ImageSource value)
{
obj.SetValue(ImageProperty, value);
}
}
3) control:
<ItemsControl Name="icImageButtons"
ItemsSource="{Binding}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button ToolTip="{Binding Tip}"
ib:ButtonProperties.Image="{Binding EnabledSource}"
Content="{Binding Text}"
Style="{StaticResource ImageButton}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Any suggestions or ideas. I am just trying to get the effect when I disable the ImageButton, The image gets greyedOut as well as the text.
Suggestions?

Related

List box modify datatemplate of items at runtime from code behind

i have this listbox
<ListBox x:Name="lbsample" ItemsSource="{Binding CurrentSettings}" SelectionMode="Extended">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem" >
<Setter Property="Focusable" Value="False"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<GroupBox x:Name="gb0" Margin="0" Background="Transparent">
<GroupBox.Header>
<CheckBox x:Name="chk0" Content="xxx"
IsChecked="{Binding Path=DataContext.IsEnabled, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}" />
</GroupBox.Header>
<!---->
<StackPanel Orientation="Horizontal" IsEnabled="{Binding Path=IsEnabled}" >
<TextBlock x:Name="lbltxt" Text="yyy"
HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="5,5,5,10"/>
</StackPanel>
</GroupBox>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
when mask is loaded i want to change the text 'xxx' and 'yyy' progmatically from code behind
how can i do that? i cannot reach the properties because listbox is bound and has itemsource
i know is not best practice.. but i do not have easy alternatives..
Thanks!
if you need something view-specific, add Loaded event handler:
<CheckBox x:Name="chk0" Content="xxx" Loaded="CheckBoxLoaded" ...>
then in code-behind get CheckBox from sender argument and change properties:
private void CheckBoxLoaded(object sender, RoutedEventArgs e)
{
var chk = sender as CheckBox;
}
however you can declare special property in item class and simple bind CheckBox:
<CheckBox x:Name="chk0" Content="{Binding PropertyX}" ...>
same approaches should work for TextBlock.

wpf grid as itemspaneltemplate gives inconsistent heights

im trying to make a week scheduler
so for each day i have a listbox with a grid as its itemspaneltemplate , and each individual session gets its row and rowspan from the database and its working very well
the problem is when i have a short appointment so the rowspan is only 2 or 3 and the content is longer, in that case the rows containing the appointment grow to accommodate the larger content
i don't want that, id rather the appointments reflect their time span even if i don't see all data
i tried many combinations of answers that i found online
heres the whole markup
<ListBox Name="lsbTasks" Loaded="lsbTasks_Loaded_1" HorizontalContentAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Disabled" VerticalContentAlignment="Stretch" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<Grid Initialized="Grid_Initialized_1" Background="Thistle" IsSharedSizeScope="True"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Grid.Row" Value="{Binding BusyFrom,Converter={StaticResource BusyFromConverter}}" />
<Setter Property="Grid.RowSpan" Value="{Binding BusyMinutes,Converter={StaticResource BusyMinutesConverter}}" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
</Style>
</ItemsControl.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<ScrollViewer ScrollViewer.CanContentScroll="True" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.IsDeferredScrollingEnabled="True">
<StackPanel Background="Purple" PreviewMouseDown="DockPanel_PreviewMouseDown_1">
<TextBlock TextAlignment="Center" TextWrapping="Wrap" Text="{Binding SessionPlace}" Foreground="Thistle" DockPanel.Dock="Bottom" />
<TextBlock TextAlignment="Center" TextWrapping="Wrap" Text="{Binding ClientName}" Foreground="White" FontWeight="Bold" DockPanel.Dock="Top" />
<TextBlock TextAlignment="Center" TextWrapping="Wrap" Text="{Binding OppositionName}" Foreground="White" DockPanel.Dock="Top" />
<TextBlock TextAlignment="Center" TextWrapping="Wrap" Text="{Binding SubjectName}" Foreground="Thistle" />
</StackPanel>
</ScrollViewer>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
and heres the initialization code
Private Sub Grid_Initialized_1(sender As Grid, e As EventArgs)
Dim mnts = MyWorkDaySpan.TotalMinutes
For i = 1 To mnts / 10
Dim rd = New RowDefinition With {.Height = New GridLength(1, GridUnitType.Star)}
'rd.SharedSizeGroup = "RowGroup"
sender.RowDefinitions.Add(rd)
Next
End Sub
but still the rows are uneven, as proven by the gridlines
id appreciate any help or guidance
You should use a different Panel, perhaps a Canvas and bind the Canvas.Top and Height properties in the ListBoxItem style.
Another alternative would be to write a custom Panel class ("CalendarPanel"), which defines two attached properties BusyFrom and BusyMinutes and arranges its child elements according to the values of these properties.

How to display ObserveableCollection<T> in ListBox

I can't bind to my ObservableCollection<T> within my ListBox.
I am using MVVM, WPF.
The binding for the page works. My understanding is, the Grid (not shown in code) is bound to my DataContext, which is my ViewModel. Therefore, my ListBox can bind to my object called Folders via the Itemssource. My Folders object is very simple, it is literally
private ObservableCollection<Folders> _folders;
public ObservableCollection<Folders> Folders
{
get { return _folders; }
set
{
if (value == _folders)
return;
_folders = value;
OnPropertyChanged("Folders");
}
}
and my Folders model is
public class Folders
{
public string SourceFolder { get; set; }
public string DestinationFolder { get; set; }
}
and lastly, my XAML
<ListBox Grid.RowSpan="2" ItemsSource="{Binding Folders, UpdateSourceTrigger=PropertyChanged}" Grid.Row="1" SelectedItem="{Binding SelectedFolderItem}" IsSynchronizedWithCurrentItem="True">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" DataContext="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBox}, AncestorLevel=1}, Path=DataContext}">
<StackPanel>
<TextBlock Text="{Binding SourceFolder}" />
<TextBlock Text="{Binding DestinationFolder}" />
<Button Content="Edit" Command="{Binding EditCommand}" CommandParameter="{Binding SelectedListItem}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The button binds/executes, but the 2 textblocks do not. I have also tried
<TextBlock Text="{Binding Folders.SourceFolder}" />
<TextBlock Text="{Binding Folders.DestinationFolder}" />
but it is the same issue. The content is not displayed (not binding) because if I add a watch on my ViewModel, I can see the values are as they should be.
If it helps, if I update my code to
<TextBlock Text="{Binding SelectedFolderItem.SourceFolder}" />
<TextBlock Text="{Binding SelectedFolderItem.DestinationFolder}" />
then it works although this is not desired (it just loops the correct number of times but only for the 1 item!).
Can some one point me in the right direction?
You are setting a different DataContext. You don't need that, otherwise you destroy the purpose of the item template.
<StackPanel Orientation="Horizontal">
<StackPanel>
<TextBlock Text="{Binding SourceFolder}" />
<TextBlock Text="{Binding DestinationFolder}" />
<Button Content="Edit"
Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBox}}, Path=DataContext.EditCommand}"
CommandParameter="{Binding}"/>
</StackPanel>
</StackPanel>
of course if you want the buttons to work aswell, you just move the relative source you currently have to the binding of the button.

ListView for timetable

I'm developing an app that presents a timetable, that looks like this:
However, I have several problems with it:
When there are too many items (minutes) to display in 1 row it
should be broken automatically in several rows (e.g. all rows after
06 should be wrapped)
I don't know where the spacing around minute items comes from. It's not
item`s margin.
When scrolling the timetable list with finger, it only gets scrolled if no minute box is touched. Otherwise the minute box moves a bit, not the
entire timetable list.
The timetable list is bound to an ObservableCollection of TimetableHour instaces:
public class TimetableHour
{
public sbyte Hour { get; set; }
public IList<TimetableItem> Items { get; set; }
public string HourString
{
get { return Hour.ToString("00") + ":"; }
}
}
and the XAML page:
<Style TargetType="ListView" x:Key="TimetableListViewStyle">
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
<Setter Property="Margin" Value="0,0,60,0" />
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBox Text="{Binding HourString}"
Width="60" Height="50"
TextAlignment="Center"
Background="CornflowerBlue" Foreground="White" BorderThickness="0"
FontSize="23"
Padding="10">
</TextBox>
<GridView ItemsSource="{Binding Items}" Height="Auto" SelectionMode="None" IsTapEnabled="False" IsHoldingEnabled="False" >
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel Background="LightSkyBlue" Width="60" Height="50">
<TextBlock Text="{Binding Minute}" HorizontalAlignment="Center" FontSize="17" FontWeight="Medium" Margin="0,2,0,0"></TextBlock>
<TextBlock HorizontalAlignment="Center">Tip</TextBlock>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<ListView Grid.Row="2" Grid.Column="2" ItemsSource="{Binding Timetable}"
Style="{StaticResource TimetableListViewStyle}"
SelectionMode="None" />
Ok, so I figured them out:
To make the minutes items wrap I needed to specify the exact width
of the GridView that is used to display them. Alternatively I can use a Grid instead of a StackPanel, to allow to use all available space - see GridView width inherited from parent
To control the spacing around GridView items you need to define the
ItemContainerStyle as described here:
Windows8 ListView and space between items
To achieve this I can set IsSwipeEnabled="False" on the GridView.

How to create a standard DataTemplate for DataGridTemplateColumn?

I've got a DataTemplate for a DataGridTemplateColum wich looks like this:
<toolkit:DataGridTemplateColumn x:Name="DataGridTextColumnIstVorvorjahr" IsReadOnly="True" SortMemberPath="SummeIstVorvorjahr">
<toolkit:DataGridTemplateColumn.CellTemplate >
<DataTemplate>
<Grid HorizontalAlignment="Stretch" Background="Transparent" Margin="0,-5">
<DockPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<TextBlock Panel.ZIndex="100" Style="{DynamicResource CellText}" Text="{Binding Path=SummeIstVorvorjahrGerundet, Converter={StaticResource numberFormatter}, ConverterParameter='#,0.0 T€'}" DockPanel.Dock="Right"/>
<Image Panel.ZIndex="90" DockPanel.Dock="Left" MouseLeftButtonUp="FilterDataGridAnalyse_MouseDoubleClick" HorizontalAlignment="Left" Margin="5,0,0,0" Width="20" Height="20" Visibility="Hidden" Name="ImageNormal" Source="pack://application:,,,/Cis.Common.Presentation;component/Resources/Images/Lupe.png" />
</DockPanel>
</Grid>
<DataTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="ImageNormal" Property="Visibility" Value="Visible" />
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</toolkit:DataGridTemplateColumn.CellTemplate>
<toolkit:DataGridTemplateColumn.HeaderTemplate>
<DataTemplate >
<DockPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" LastChildFill="False">
<TextBlock x:Name="TextBlockHeaderZeile1" Text="Ist" DockPanel.Dock="Top" />
<WrapPanel DockPanel.Dock="Top">
<TextBlock x:Name="TextBlockHeaderZeile2" Text=""/>
<ContentPresenter x:Name="contentPresenter">
<ContentPresenter.Content>
<Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Content" />
</ContentPresenter.Content>
</ContentPresenter>
</WrapPanel>
<Border Style="{DynamicResource borderline}">
<TextBlock VerticalAlignment="Stretch" x:Name="TextBlockSumme" Text="{Binding Path=KumulierteSummeIstVorvorjahr, Converter={StaticResource numberFormatter}, ConverterParameter='#,0.0 T€', RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type cis:ChildWindow}}}"
/>
</Border>
</DockPanel>
</DataTemplate>
</toolkit:DataGridTemplateColumn.HeaderTemplate>
</toolkit:DataGridTemplateColumn>
Now I want to make a StandartTemplate for this Type because I've got many Colums like this, with only differ in the bindings of the texts in the colums as well as in their headers.
As far I've tried to make a Style for this, but this won't work, I tried to create an usercontrol (but I think it's like taking a sledgehammer to crack a nut).
So any help or hint how to solve this problem would be appreciated.
I don't see why you've rejected the UserControl approach. UserControls are pretty lightweight. They add very little overhead at runtime. They are an extra feature in your project of course, but I usually find that to be an improvement - WPF projects with a small number of large Xaml files are typically hard to maintain.
Far from being a 'sledgehammer', they seem like exactly the right solution here to me.
Add the DataTemplate into the Resources and then access it via a StaticResource
<Window>
<Window.Resources>
<DataTemplate x:Key="MyColumnTemplate">
...
</DataTemplate>
<DataTemplate x:Key="MyColumnTemplateHeader">
...
</DataTemplate>
</Window.Resources>
...
<toolkit:DataGridTemplateColumn x:Name="DataGridTextColumnIstVorvorjahr" IsReadOnly="True" SortMemberPath="SummeIstVorvorjahr"
CellTemplate={StaticResource MyColumnTemplate}
HeaderTemplate={StaticResource MyColumnTemplateHeader}
...
</Window>
If I understand you, you try to bind the same column template with different data and to have different header's content relative with column data. So, you may use "dynamic XAML" (XAML used in C# code - that is dynamic) which allows you to use one template for different data.
Here a simple example.
In C# code we create DataGridTemplateColumn object:
DataGridTemplateColumn tc = new DataGridTemplateColumn();
Then we set the CellTemplate property with template which is created dynamically in special function:
tc.CellTemplate = (DataTemplate)XamlReader.Parse(GetTextCellDataTemplate(someText));
Here is a special function which creates our template:
public static string GetTextCellDataTemplate(string bindingPath)
{
return #"
<DataTemplate
xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation""
xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml"" >
<ScrollViewer MaxHeight=""200"" MaxWidth=""250"" VerticalScrollBarVisibility=""Auto"">
<TextBlock Text=""{Binding Path=" + bindingPath + #"}""
TextWrapping=""Wrap"" />
</ScrollViewer>
</DataTemplate>";
}
Now you may send various information in this function as text and get the same template. You may choose the template from the information you want to put in the cell. For this you must write various function which will return various templates.
The same approach can be applied to header template.

Resources