<syncfusion:SfKanban.ColumnHeaderTemplate>
<DataTemplate>
<StackPanel Width="300" Height="40" Background="Silver">
<TextBlock Margin="10" Text="{Binding Header}" Foreground="Purple" HorizontalAlignment="Left"/>
</StackPanel>
</DataTemplate>
</syncfusion:SfKanban.ColumnHeaderTemplate>
|
<Page.Resources>
<ResourceDictionary>
<local:CardCountConverter x:Key="CardCountConverter"/>
</ResourceDictionary>
</Page.Resources>
<kanban:SfKanban.ColumnHeaderTemplate>
<DataTemplate>
<Grid Background="Transparent" Width="300">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="6*" />
<RowDefinition Height="4*" />
</Grid.RowDefinitions>
<TextBlock x:Name="Header" Text="{Binding Header}"
VerticalAlignment="Center"
FontWeight="Medium"
FontSize="16"
Foreground="Blue"
TextWrapping="NoWrap"
Grid.Row="0"
Margin="0,5,0,5"
Grid.ColumnSpan="1" />
<StackPanel Grid.Row="1" x:Name="WIPPanel"
Grid.Column="0"
Orientation="Horizontal">
<TextBlock Text="{Binding [ItemsCount]}"
Margin="0,2,0,5"
VerticalAlignment="Center"
Foreground="Green"
FontSize="14"
TextWrapping="WrapWholeWords"/>
<TextBlock Text="{Binding CardCount}"
Margin="5,2,0,5"
VerticalAlignment="Center"
Foreground="Black"
FontSize="14"
TextWrapping="WrapWholeWords"/>
<TextBlock Text="{Binding Content, RelativeSource={RelativeSource Mode=TemplatedParent},
ConverterParameter=MinMaxLimit,
Converter={StaticResource CardCountConverter}}"
Margin="0,2,0,5"
Foreground="Red"
VerticalAlignment="Center"
FontSize="14"
TextWrapping="WrapWholeWords" />
</StackPanel>
</Grid>
</DataTemplate>
</kanban:SfKanban.ColumnHeaderTemplate> |
public class CardCountConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
if (parameter != null && parameter.Equals("SwimlaneCardCount"))
{
int itemsCount = (int)value;
if (itemsCount == 0 || itemsCount == 1)
{
return value + " " + "Item";
}
return value + " " + "Items";
}
ColumnTag columnTag = value as ColumnTag;
if (columnTag == null)
{
return string.Empty;
}
if (columnTag.Minimum > -1 && columnTag.Maximum > -1)
{
return " | " + "Min" + " " + columnTag.Minimum + " / "
+ "Max" + " " + columnTag.Maximum;
}
else if (columnTag.Maximum > -1)
{
return " | " + "Max" + " " + columnTag.Maximum;
}
else if (columnTag.Minimum > -1)
{
return " | " + "Min" + " " + columnTag.Minimum;
}
else
{
return string.Empty;
}
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
return value;
}
} |
<kanban:SfKanban.ColumnHeaderTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="9*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="6*" />
<RowDefinition Height="4*" />
</Grid.RowDefinitions>
<TextBlock x:Name="Header" Text="{Binding Header}"
VerticalAlignment="Center"
FontWeight="Medium"
FontSize="16"
Foreground="Blue"
TextWrapping="NoWrap"
Grid.Row="0"
Margin="0,5,0,5"
Grid.ColumnSpan="1" />
<StackPanel Grid.Row="1" x:Name="WIPPanel"
Grid.Column="0"
Orientation="Horizontal">
<TextBlock Text="{Binding [ItemsCount]}"
Margin="0,2,0,5"
VerticalAlignment="Center"
Foreground="Green"
FontSize="14"
TextWrapping="WrapWholeWords"/>
<TextBlock Text="{Binding CardCount}"
Margin="5,2,0,5"
VerticalAlignment="Center"
Foreground="Black"
FontSize="14"
TextWrapping="WrapWholeWords"/>
<TextBlock Text="{Binding Content, RelativeSource={RelativeSource Mode=TemplatedParent},
ConverterParameter=MinMaxLimit,
Converter={StaticResource CardCountConverter}}"
Margin="0,2,0,5"
Foreground="Red"
VerticalAlignment="Center"
FontSize="14"
TextWrapping="WrapWholeWords" />
</StackPanel>
<Border Grid.Column="1" x:Name="CollapsedIcon" Background="Transparent"
Grid.Row="1">
<Path Data="M172.444,310.778 L158.444,317.111 L171.222,324.222"
Stretch="Fill" HorizontalAlignment="Right"
Stroke="#FF595959"
StrokeThickness="2"
StrokeLineJoin="Miter"
UseLayoutRounding="False"
Width="7" Height="14">
<Path.RenderTransform>
<CompositeTransform x:Name="RotateTransform"
Rotation="0"/>
</Path.RenderTransform>
</Path>
</Border>
</Grid>
</DataTemplate>
</kanban:SfKanban.ColumnHeaderTemplate> |
<ControlTemplate x:Key="CollapsedColumnTemplate" TargetType="local:CustomKanbanColumn">
<Grid Background="Red" Margin="2,0,0,0" >
…
</ControlTemplate> |
public class CustomKanbanColumn : KanbanColumn
{
#region Fields
private ControlTemplate collapsedTemplate;
private ControlTemplate expandedTemplate;
#endregion
#region ctor
public CustomKanbanColumn()
{
PointerReleased += KanbanColumnAdv_PointerReleased;
expandedTemplate = KanbanDictionaries.GenericCommonDictionary["ExpandedTemplate"] as ControlTemplate;
collapsedTemplate = KanbanDictionaries.GenericCommonDictionary["CollapsedTemplate"] as ControlTemplate;
}
#endregion
#region Properties
public new bool IsExpanded
{
get { return (bool)GetValue(IsExpandedProperty); }
set { SetValue(IsExpandedProperty, value); }
}
..
private void KanbanColumnAdv_PointerReleased(object sender, PointerRoutedEventArgs e)
{
if (e.OriginalSource is Border &&
((e.OriginalSource as Border).Name == "CollapsedIcon"))
{
IsExpanded = false;
}
else if (!IsExpanded)
{
IsExpanded = true;
}
}
#endregion
} |
|
|
<Grid Grid.Row="1">
<Canvas HorizontalAlignment="Center" >
<TextBlock
Margin="{Binding Converter={StaticResource CollapsedHeaderMarginConverter}, RelativeSource={RelativeSource Mode=Self}}"
….
Text="{TemplateBinding Title}">
…
</TextBlock>
</Canvas>
</Grid> |
<Grid Grid.Row="1">
<Canvas HorizontalAlignment="Center" >
<TextBlock
….
Text="{TemplateBinding Title}"
Margin="{Binding Converter={StaticResource CollapsedHeaderMarginConverter}, RelativeSource={RelativeSource Mode=Self}}">
…
</TextBlock>
</Canvas>
</Grid> |
private async void NewColumn_Click(object sender, RoutedEventArgs e)
{
CustomKanbanColumn customKanbanColumn = new CustomKanbanColumn();
CustomColumnDialog newColumnTaskDialog = new CustomColumnDialog
{
Model = null,
Kanban = kanbanBoard,
KanbanColumn = customKanbanColumn,
PrimaryButtonText = "Create",
IsSecondaryButtonEnabled = false
};
await newColumnTaskDialog.ShowAsync(); // Dialog open
kanbanBoard.Columns.Add(customKanbanColumn);
} |
<ContentDialog.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ThemeDictionary.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</ContentDialog.Resources>
<ContentDialog.Background>
<!--<RevealBackgroundBrush Opacity="0.7" Color="{ThemeResource RegionColor}" />-->
<AcrylicBrush
BackgroundSource="HostBackdrop"
TintColor="{ThemeResource RegionColor}"
TintOpacity="0.6" />
</ContentDialog.Background>
<Grid>
<ScrollViewer>
<StackPanel>
<TextBox
x:Name="title"
Header="Title:"
IsEnabled="True"
Text="{x:Bind KanbanColumn.Title, Mode=TwoWay}" />
<TextBox
x:Name="category"
Header="Category:"
IsEnabled="True"
Text="{x:Bind KanbanColumn.Categories, Mode=TwoWay}" />
<TextBox
x:Name="minItemCount"
Header="Min_Limit:"
IsEnabled="True"
Text="{x:Bind KanbanColumn.MinimumLimit, Mode=TwoWay}" />
<TextBox
x:Name="maxItemcount"
Header="Max_Limit:"
IsEnabled="True"
Text="{x:Bind KanbanColumn.MaximumLimit, Mode=TwoWay}" />
</StackPanel>
</ScrollViewer>
</Grid>
</ContentDialog> |
Hello Team,
I've gotten around to adding the new column feature in my application, and it seems to work as expected on Debug x64 mode, but when I run it in my application on Release x64 mode it doesn't seem to populate the columns. I followed the above example as well and wasn't too sure what the issue may be - months ago when I had time to work on it I came across a dependency property issue but it hasn't popped up since. Any ideas? The link to the repo is the following and the latest commit contains the work for adding a new column in Board.xaml.cs inside of ConfigureBoardColumns(): https://github.com/hjohnson12/Kanban-Tasker
Thanks team!!
public CustomKanbanColumn KanbanColumn { get; set; }
|
private void AddColumnButton_Click(object sender, RoutedEventArgs e)
{
AddColumn();
}
private async Task AddColumn()
{
var dialog = new NewColumnDialog();
var result = await dialog.ShowAsync();
if (result == ContentDialogResult.Primary)
{
var columnName = dialog.ColumnName;
var maxTaskLimit = dialog.MaxTaskLimit;
//Verify variable data is in correct format
if (ViewModel.Columns.Any(x => x.ColumnName.Equals(columnName)))
{
ViewModel.ShowInAppNotification("A column with that name already exists");
return;
}
else if (columnName == "" || maxTaskLimit == 0)
{
ViewModel.ShowInAppNotification("Please fill out the required fields");
return;
}
// Continue with creating column
var column = ViewModel.CreateColumn(columnName, maxTaskLimit);
CustomKanbanColumn newColumn = new CustomKanbanColumn()
{
Title = column.ColumnName,
Categories = column.ColumnName,
CollapsedColumnTemplate = this.Resources["CollapsedColumnTemplate"] as ControlTempla
MaximumLimit = column.MaxTaskLimit
};
var myBinding = new Binding()
{
Path = new PropertyPath("ColumnName"),
Source = column,
Mode = BindingMode.TwoWay,
UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged
};
var myBinding2 = new Binding()
{
Path = new PropertyPath("MaxTaskLimit"),
Source = column,
Mode = BindingMode.TwoWay,
UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged
};
// Set bindings
newColumn.SetBinding(KanbanColumn.TitleProperty, myBinding);
newColumn.SetBinding(KanbanColumn.CategoriesProperty, myBinding);
newColumn.SetBinding(KanbanColumn.MaximumLimitProperty, myBinding2);
// Add to kanban columns
kanbanBoard.Columns.Add(newColumn);
}
} |