I have a userControl which is a listbox with a button inside. After the record is updated, the list re-load. I had a converter to check the button is visible or not. However, the border of the button is still visible even the content of the button is invisible. Would someone show me how to do it? Thanks in advance.
There is my user control:
<UserControl x:Class="CMSPhoneApp.QueueListControl"
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"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="480" d:DesignWidth="480"
xmlns:local="clr-namespace:CMSPhoneApp" >
<UserControl.Resources>
<local:VisibilityConverter x:Key="VisibilityConverter"/>
<local:ColumSpanConverter x:Key="ColumSpanConverter"/>
</UserControl.Resources>
<ListBox x:Name="lst" HorizontalAlignment="Left" Margin="6,6,0,0" VerticalAlignment="Top"
ItemsSource="{Binding Path=MyQueue}"
SelectedItem="{Binding Path=CurrentQueue, Mode=TwoWay}" Height="380" >
<ListBox.ItemTemplate>
<DataTemplate>
<!--<Border BorderThickness="0,1,0,1" BorderBrush="Blue">-->
<Grid x:Name="grd" Width="auto" HorizontalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".1*" />
<ColumnDefinition Width=".6*"/>
<ColumnDefinition Width=".3*" />
</Grid.ColumnDefinitions>
<Image Source="{Binding Type}" Grid.Row="0" Grid.Column="0"/>
<TextBlock Grid.Row="0" Grid.Column="1" Grid.ColumnSpan= "{Binding isSpan, Converter={StaticResource ColumSpanConverter}}" Text="{Binding summary}" TextWrapping="Wrap"
Style="{StaticResource PhoneTextAccentStyle}" />
<Button x:Name="btnAction" Grid.Row="0" Grid.Column="2" ClickMode="Press" Click="btnAction_Click" Style="{StaticResource NoBorderButton}"
Visibility="{Binding isVisibility, Converter={StaticResource VisibilityConverter}}"
Tag="{Binding callNumber}">
<Button.Content>
<TextBlock Width="85" Height="35" Text="{Binding ActionCaption}"
/>
</Button.Content>
</Button>
<!-- the divider -->
<Line X1="0" X2="700" Y1="0" Y2="0" Grid.Row="0" Grid.ColumnSpan="3" Grid.Column="0"
VerticalAlignment="Bottom" Stroke="Blue" StrokeThickness="5"/>
</Grid>
<!--</Border>-->
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
There is the style of this button
<Style x:Key="NoBorderButton" TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
<Setter Property="Padding" Value="10,3,10,5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Pressed" GeneratedDuration="0:0:0.2"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal">
<Storyboard>
<ColorAnimation Duration="0" To="#FFA3EF8F" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="ButtonBackground" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ColorAnimation Duration="0" To="#FF104772" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="ContentContainer" />
<ColorAnimation Duration="0" To="#FFEF8328" Storyboard.TargetProperty="(Control.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="ContentContainer" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="ButtonBackground" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}" BorderBrush="#FFF19D47">
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" BorderBrush="Black" BorderThickness="3"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
There is the MainPage.xaml
<phone:PhoneApplicationPage xmlns:my="clr-namespace:CMSPhoneApp"
x:Class="CMSPhoneApp.TestPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"
mc:Ignorable="d" d:DesignHeight="696" d:DesignWidth="480"
shell:SystemTray.IsVisible="True"
xmlns:local="clr-namespace:CMSPhoneApp"
xmlns:toolkit="clr- namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
>
<toolkit:TransitionService.NavigationInTransition>
<toolkit:NavigationInTransition>
<toolkit:NavigationInTransition.Backward>
<toolkit:TurnstileTransition Mode="BackwardIn"/>
</toolkit:NavigationInTransition.Backward>
<toolkit:NavigationInTransition.Forward>
<toolkit:TurnstileTransition Mode="ForwardIn"/>
</toolkit:NavigationInTransition.Forward>
</toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<toolkit:TransitionService.NavigationOutTransition>
<toolkit:NavigationOutTransition>
<toolkit:NavigationOutTransition.Backward>
<toolkit:TurnstileTransition Mode="BackwardOut"/>
</toolkit:NavigationOutTransition.Backward>
<toolkit:NavigationOutTransition.Forward>
<toolkit:TurnstileTransition Mode="ForwardOut"/>
</toolkit:NavigationOutTransition.Forward>
</toolkit:NavigationOutTransition>
</toolkit:TransitionService.NavigationOutTransition>
<phone:PhoneApplicationPage.Resources>
<local:QueueItemViewModel x:Key="TestViewModel"/>
<DataTemplate x:Name="PickerItemTemplate">
<StackPanel Orientation="Horizontal" Margin="16 0 0 0">
<TextBlock Text="{Binding city}" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center" />
</StackPanel>
</DataTemplate>
<DataTemplate x:Name="PickerFullModeItemTemplate">
<StackPanel Orientation="Horizontal" >
<TextBlock Text="{Binding city}" Margin="16 0 0 0" FontSize="24" FontFamily="{StaticResource PhoneFontFamilyLight}" />
</StackPanel>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" DataContext="{StaticResource TestViewModel}" Background="#FFF3CC62" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28" >
<my:Title x:Name="thisTitle" TitleCaption="Queue" />
</StackPanel>
<StackPanel x:Name="City" Grid.Row="1" Margin="12,0,12,0" Orientation="Horizontal">
<toolkit:ListPicker x:Name="listPicker" ItemTemplate="{StaticResource PickerItemTemplate}"
Header="Location" CacheMode="BitmapCache" Width="194" FullModeItemTemplate="{StaticResource PickerFullModeItemTemplate}"
SelectedItem="{Binding city}" BorderBrush="#BF86EDA8" />
</StackPanel>
<!--ContentPanel - place additional content here-->
<my:QueueListControl x:Name="lst" Grid.Row="2" />
<!--<StackPanel Grid.Row="3" Orientation="Horizontal" >
<Button x:Name="btnQueue" Style="{StaticResource ButtonStyle1}" Content="Queue"/>
<Button x:Name="btnRefresh" Style="{StaticResource ButtonStyle1}" Content="Refresh"/>
</StackPanel>-->
</Grid>
<!--Sample code showing usage of ApplicationBar-->
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="true" IsMenuEnabled="True" ForegroundColor="#FFABBBF6" BackgroundColor="#FFECED69">
<shell:ApplicationBarIconButton IconUri="images/menubar/flag.png" Text="Queue"/>
<shell:ApplicationBarIconButton IconUri="images/menubar/phone.png" Text="Call"/>
<shell:ApplicationBarIconButton IconUri="images/menubar/edit.png" Text="New Event"/>
<shell:ApplicationBarIconButton IconUri="images/menubar/checklist.png" Text="Events"/>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
There is the code behind to rebound the itemsSoruce:
//update the image and status to the list
private void UpdateUI()
{
foreach (QueueItem a in ar.cmsQueue)
{
if (Convert.ToInt32(a.callNumber) == currentCall.id)
{
a.status = UPSTATUS; //status:responded;
var location = (from c in ar.cmsQueue orderby c.callNumber select c);
Dispatcher.BeginInvoke(new Action(() => lst.lst.ItemsSource = location));
}
}
}
You could look to set the following (in the style) to something that isn’t displayed (like
Transparent)or set the
BorderThicknessto0