Rich Application

Archive for the ‘Datatrigger’ Category

Outlook will have collapsible left panel. If the panel is collapsed content will be displayed in the floating panel.I tried creating this in WPF with XAML without C#. I Created the Style but with hardcoding in two place.
screen2
screen12

This Expander style has tow template Default expander Template and one for Floating the Content. Here I used Popup control to get floating panel. And also I added two styles for Togglebutton used in expander, One for Horizontal Button Style and another for vertical Button Style


     <controltemplate x:Key="RightExpander" TargetType="{x:Type Expander}">
            <border SnapsToDevicePixels="true" Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                CornerRadius="3">
                <grid>
                    </grid><grid .RowDefinitions>
                        <rowdefinition Height="Auto"/>
                        <rowdefinition Height="Auto"/>
                    </grid>

                    <togglebutton Width="{TemplateBinding ActualWidth}"   Margin="0,1,0,1" MinHeight="0" MinWidth="30" x:Name="HeaderSite"
                                              Style="{StaticResource LeftPanelCollpasedButtonStyle}" Content="{TemplateBinding Header}"
                                              ContentTemplate="{TemplateBinding HeaderTemplate}"
                                              ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"
                                              FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}"
                                              FontStretch="{TemplateBinding FontStretch}" FontStyle="{TemplateBinding FontStyle}"
                                              FontWeight="{TemplateBinding FontWeight}" Foreground="{TemplateBinding Foreground}"
                                              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              Padding="{TemplateBinding Padding}"
                                              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                              IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" DockPanel.Dock="Top"/>

                    <popup x:Name="popup" AllowsTransparency="True"  IsOpen="False" Placement="Bottom" PlacementTarget="{Binding ElementName=HeaderSite}">
                        <grid>

                            <contentcontrol x:Name="shadow" Visibility="Collapsed" HorizontalAlignment="Stretch" Style="{DynamicResource ShadowTemplate}"
						VerticalAlignment="Stretch" Content="ContentControl"  Opacity="1"
						Margin="2,0,2,0" Foreground="#FF000000"/>
                            <contentpresenter Opacity="1" MinWidth="220"  HorizontalAlignment="Left" Margin="0,0,0,0" x:Name="ExpandSite" Focusable="false" Visibility="Collapsed" VerticalAlignment="Top" />
                        </grid>

                    </popup>

            </border>
            </controltemplate><controltemplate .Triggers>

                <trigger Property="IsExpanded" Value="true">
                    <setter TargetName="shadow" Property="Visibility" Value="Visible"/>
                    <setter TargetName="popup" Property="Placement" Value="Right"/>
                    <setter TargetName="popup" Property="HorizontalOffset" Value="-5"/>
                    <setter TargetName="popup" Property="IsOpen" Value="true"/>
                    <setter TargetName="ExpandSite" Property="Margin" Value="5,5,5,5"/>

                    <setter Property="Visibility" TargetName="ExpandSite" Value="Visible"/>
                </trigger>

                <trigger Property="IsEnabled" Value="false">
                    <setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                </trigger>
            </controltemplate>

Here is the Source
Source Contains Animated Listbox Style too

Advertisements

Search functionality will use Listview or Listbox to display the result. If there is no result found we will display message in different screen. In WPF with the use of Datatrigger we can change the Listview style in such a way it can display “Message” if there is no item exist or found .
Here the Datatrigger used in the Listview style.

 <style .Triggers>
                <datatrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Items.Count}"
                    Value="0">
                    <setter Property="Template" Value="{DynamicResource ListviewWithNoItem}"/>
                </datatrigger>
            </style>

If there is any item added , Listview will choose default Listview style else it wil show “ListviewWithNoItem” Style.

listviewstyle

  <controltemplate TargetType="{x:Type ListView}" x:Key="ListviewWithNoItem">
            <border SnapsToDevicePixels="true" x:Name="Bd" CornerRadius="3" Background="{TemplateBinding Background}" BorderBrush="#FFDDDDDD" 
                    BorderThickness="1">
                <grid>
                    <textblock HorizontalAlignment="Center" FontSize="15" Foreground="Gray" VerticalAlignment="Center" Text="No Items Found"/>
                </grid>

            </border>
    
        </controltemplate>

    
        <style x:Key="ListViewStyle" TargetType="{x:Type ListView}">
          
            </style><style .Triggers>
                <datatrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Items.Count}"
                    Value="0">
                    <setter Property="Template" Value="{DynamicResource ListviewWithNoItem}"/>
                </datatrigger>
            </style>
        

Find the Soure Here

This is an simple style for Textbox for using search. Here I am using Datatrigger to find content of textbox. If it is content is empty textbox will show “Search” or else textbox will display the content.


This is the style with simple animation 🙂

  <setter Property="Template">
                        </setter><setter .Value>
                            <controltemplate TargetType="{x:Type TextBox}">
                                <border CornerRadius="2" BorderThickness="1" BorderBrush="#FFCCCCCC" ClipToBounds="True">
                                    <grid>


                                        <textblock Visibility="Collapsed" x:Name="emptyText"   HorizontalAlignment="Left" 
                                                   VerticalAlignment="Top" Margin="2,2,0,0" Text="Search" 
                                               TextWrapping="Wrap" FontFamily="Calibri" FontSize="12" 
                                               Foreground="#FF808080" FontStyle="Italic" />

                                        <border x:Name="Bd" SnapsToDevicePixels="True"  BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0,0,0" >
                                            </border><border .Background>
                                                <solidcolorbrush Color="#00FFFFFF" x:Name="solidColor"/>
                                            </border>
                                            <scrollviewer Opacity=".6" x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                                        </grid></border>
                                    
                                
                                </controltemplate><controltemplate .Triggers>

                                    <datatrigger Binding="{Binding RelativeSource={RelativeSource Self},
                                     Path=Text}" Value="">
                                        <setter Property="Visibility" Value="Visible" TargetName="emptyText"/>
                                    </datatrigger>

                            

                                    <trigger Property="IsFocused" Value="True">
                                        </trigger><trigger .EnterActions>
                                            <beginstoryboard>
                                                <storyboard>
                                                    <coloranimation Storyboard.TargetName="solidColor" Storyboard.TargetProperty="Color" To="#FFFFFFFF"
                                                                    Duration="00:00:00.3" />
                                                    <thicknessanimation Storyboard.TargetName="Bd" 
                                                                        Storyboard.TargetProperty="BorderThickness" To="1,1,1,1" Duration="00:00:00.3"/>
                                                    <doubleanimation Storyboard.TargetName="PART_ContentHost" 
                                                                        Storyboard.TargetProperty="Opacity" To="1" Duration="00:00:00.3"/>

                                                </storyboard>
                                            </beginstoryboard>
                                        </trigger>
                                        <trigger .ExitActions>
                                            <beginstoryboard>
                                                <storyboard>
                                                    <coloranimation Storyboard.TargetName="solidColor" Storyboard.TargetProperty="Color" To="#00FFFFFF"
                                                                    Duration="00:00:00.2" />
                                                    <thicknessanimation Storyboard.TargetName="Bd" 
                                                                        Storyboard.TargetProperty="BorderThickness" To="0,0,0,0" Duration="00:00:00.2"/>
                                                    <doubleanimation Storyboard.TargetName="PART_ContentHost" 
                                                                        Storyboard.TargetProperty="Opacity" To=".6" Duration="00:00:00.2"/>

                                                </storyboard>
                                            </beginstoryboard>
                                        </trigger>
                                    
                                    
                                </controltemplate>
                            
                        </setter>
                    

Here is the Source



  • monwsh.over-blog.com: I love what you guys tend to be up too. This sort of clever work and reporting! Keep up the amazing works guys I've included you guys to our blogrol
  • incense burner: This is very interesting, You are an excessively professional blogger. I have joined your rss feed and look forward to looking for more of your fanta
  • Online Low cost Hotels scheduling in The capital: We're a bunch of volunteers and opening a brand new scheme in our community. Your web site provided us with helpful info to work on. You've performed
December 2017
M T W T F S S
« Feb    
 123
45678910
11121314151617
18192021222324
25262728293031