I have a ListView in a WPF Window. This ListView is binded to a strongly typed list.
I have 10 Windows like this. each having a Listview binded to a strongly typed list.
I have a StackPanel with 4 buttons and a Label Below the ListView that serves as a Pager for the ListView. Currently, I am handling the Buttons events in the Code behind for the window.
Can anyone guide me on making this part of the pager a UserControl?
The part i am confused in is.. How do I handle the List<type> in the Code behind?
1) How do i Access the Usercontrol properties in the Codebehind for Window.
2) Where do i do the Actual Filtering for the list and Set the itemsource to the listview.
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Button Name="btnFirst" Content="<<" Margin="2,2,15,2" Width="20" Height="20" Tag="First" ToolTip="First" Click="btnNav_Click"/>
<Button Name="btnPrev" Content="<" Margin="2,2,15,2" Width="20" Height="20" Tag="Prev" ToolTip="Previous" Click="btnNav_Click"/>
<Label Name="lblPage" Margin="2,2,15,2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Button Name="btnNext" Content=">" Margin="2,2,15,2" Width="20" Height="20" Tag="Next" ToolTip="Next" Click="btnNav_Click"/>
<Button Name="btnLast" Content=">>" Margin="2,2,0,2" Width="20" Height="20" Tag="Last" ToolTip="Last" Click="btnNav_Click"/>
</StackPanel>
Thnkx Guys!.. But that is not what i was looking for !..
I have the paging imlementation with me .. but i want to make it generic and make a usercontrol that i could reuse in every wpf window.
Here's how i did it.
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Button Name="btnFirst" Content="<<" Margin="2,2,10,2" Width="20" Height="20" Tag="First" ToolTip="First" Click="btnNav_Click"/>
<Button Name="btnPrev" Content="<" Margin="2,2,10,2" Width="20" Height="20" Tag="Prev" ToolTip="Previous" Click="btnNav_Click"/>
<Label HorizontalAlignment="Center" VerticalAlignment="Center" Content="Page :" Margin="2,2,0,2"/>
<ComboBox Name="cmbxPageNo" HorizontalAlignment="Left" Margin="1,2,4,0" HorizontalContentAlignment="Center" VerticalContentAlignment="Bottom" VerticalAlignment="Center" Width="35" Style="{StaticResource PagerCmbx}" SelectionChanged="cmbxPageNo_SelectionChanged" Height="18" ItemsSource="{Binding}"/>
<Label Name="lblTotPage" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="14" Content="/ 5"/>
<Button Name="btnNext" Content=">" Margin="15,2,10,2" Width="20" Height="20" Tag="Next" ToolTip="Next" Click="btnNav_Click"/>
<Button Name="btnLast" Content=">>" Margin="2,2,0,2" Width="20" Height="20" Tag="Last" ToolTip="Last" Click="btnNav_Click"/>
</StackPanel>
This is the ui for the control which would look like
now for the class..
http://pastebin.com/jGywtEgG
At the Xaml for the window . where u show the listview with the binded strongly typed list.
Place the Usercontrol below the listview.
Set the itemsource for the listview={Binding ElementName = "nameof the usercontrol",Path = CurrentView}
CurrentView is the Property exposed in the class with Inotifypropertychanged implemented.
That's pretty much it.
Here is a good video tutorial by Beth Massi on WindowsClient.net. It covers paging along with many concepts useful for creating a Data-Centric application in WPF.
How Do I: Create a Simple Data Entry Form in WPF
Related
I am new to C# and WPF so please give me some ideas:
I have an WPF app used to display some stack panels,all stack panels default Visibility is set to collapsed and they will switch to visible according to the received data.
Now I want to make all these stack panels to resources so I can reuse it in some new added tab controls and stack panels.
<StackPanel x:Name="ColorOption" Visibility="Collapsed">
<TextBlock Text="Line Color" Style="{StaticResource ItemNameTextBlockStyle}"/>
<Button Style="{StaticResource ColorButtonStyle}" Click="Color_Click">
<Button.Content>
<Rectangle x:Name="LineColorRect" Style="{StaticResource ColorSelectionRectangleStyle}" />
</Button.Content>
</Button>
</StackPanel>
Above is one example of stack panels I am using. In the code behind the function "Color_Click" will change this "ColorOption" stack panel state and do something.
However after I try to put this stack panel into Windows.Resources
<Window.Resources>
<StackPanel x:Name="ColorOption" Visibility="Collapsed" x:Key="ColorOption">
<TextBlock Text="Line Color" Style="{StaticResource ItemNameTextBlockStyle}"/>
<Button Style="{StaticResource ColorButtonStyle}" Click="Color_Click">
<Button.Content>
<Rectangle x:Name="LineColorRect" Style="{StaticResource ColorSelectionRectangleStyle}" />
</Button.Content>
</Button>
</StackPanel>
</Window.Resources> (I also put the style files inside)
In the tab controls I did
<TabControl>
<TabItem Header="Tab 1" Content="{StaticResource ColorOption}"/>
</TabControl>
The visual studio shows error in the code behind says "ColorOption does not exist in the current context"
How can I fix this? Is any way to set the context? thank you
You can simply wrap the StackPanel in ContentControl and make it ControlTemplate.
<ControlTemplate x:Key="ColorOptionTemplate" TargetType="{x:Type ContentControl}">
<StackPanel x:Name="ColorOption" Visibility="Collapsed">
<TextBlock Text="Line Color" Style="{StaticResource ItemNameTextBlockStyle}"/>
<Button Style="{StaticResource ColorButtonStyle}" Click="Color_Click">
<Button.Content>
<Rectangle x:Name="LineColorRect" Style="{StaticResource ColorSelectionRectangleStyle}"/>
</Button.Content>
</Button>
</StackPanel>
</ControlTemplate>
However, you will need to change properties of controls inside the ContentControl and it would be cumbersome. So the StackPanel could be wrapped in UserControl instead.
<UserControl x:Class="WpfApp1.ColorOptionControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel x:Name="ColorOption" Visibility="Collapsed">
<TextBlock Text="Line Color" Style="{StaticResource ItemNameTextBlockStyle}"/>
<Button Style="{StaticResource ColorButtonStyle}" Click="Color_Click">
<Button.Content>
<Rectangle x:Name="LineColorRect" Style="{StaticResource ColorSelectionRectangleStyle}"/>
</Button.Content>
</Button>
</StackPanel>
</UserControl>
This is a common way in WPF. The downside is that you will need to add dependency properties to UserControl and wire up them with dependency properties of internal controls so that you can set their values at the level of UserControl and bridge them with external controls and window. This could be complicated and cumbersome as well.
So I think ideally it would be better to find an existing control which has similar functionalities you want and create a custom control deriving from the existing one.
I have used calendar control and its display mode is year when my user control is loads then calender width s too large and doesn't appear when width is set .but when is select any month then width is set as it should
i m not getting what is the issue behind it
can anyone help me quickly???
Here is my code and what ever selected month will appear in textbox's text property and on click event of button my calendar control is set to visible
<StackPanel Grid.Row="0" Grid.Column="0" Orientation="HorizontalHorizontalAlignment="Left "Margin="4">
<Label Content="Month: " HorizontalAlignment="Right" VerticalAlignment="Top" FontSize="15" FontWeight="DemiBold" Margin="4"/>
<TextBox Height="23" HorizontalAlignment="Stretch" Name="SelectedMonthTextBox" VerticalAlignment="Top" Width="130" Margin="4" LostFocus="SelectedMonthTextBox_LostFocus" SelectionBrush="#FF767879"/>
<Button Content=".." Height="20" Width="20" Margin="4" Name="button" Click="button_Click" />
</StackPanel>
<Calendar Grid.Row="1" Grid.Column="0" Margin="50,-8" Panel.ZIndex="100" Name="calendar1" DisplayModeChanged="calendar1_DisplayModeChanged" DisplayDateChanged="calendar1_DisplayDateChanged" HorizontalAlignment="Left" DisplayMode="Year" Style="{StaticResource CalendarStyle}" Focusable="False" HorizontalContentAlignment="Left" VerticalAlignment="Top" />
i took a look your code and from information you provided so far, there is no any change a you describe. I believe that you should check following:
What happens in calendar1_DisplayModeChanged
How defined your style: StaticResource CalendarStyle
If it possible please post them here. I will try to help as soon as possible :)
I have a border that contains a TabControl in a HeaderedContentControl:
<Border Grid.Column="1"
Style="{StaticResource MainBorderStyle}">
<HeaderedContentControl
Content="{Binding Path=Workspaces}"
ContentTemplate="{StaticResource WorkspacesTemplate}"
Header="Decision Workspaces"
Style="{StaticResource MainHCCStyle}"/>
</Border>
The TabControl is defined in a static resource:
<DataTemplate x:Key="ClosableTabItemTemplate">
<DockPanel Width="120" ToolTip="{Binding Path=DisplayName, Mode=OneTime}">
<Button
Command="{Binding Path=CloseCommand}"
Content="X"
Cursor="Hand"
DockPanel.Dock="Right"
Focusable="False"
FontFamily="Courier"
FontSize="9"
FontWeight="Bold"
Margin="0,1,0,0"
Padding="0"
VerticalContentAlignment="Bottom"
Width="16" Height="16"
/>
<ContentPresenter
Content="{Binding Path=DisplayName, Mode=OneTime}"
VerticalAlignment="Center"
/>
</DockPanel>
</DataTemplate>
<!--
This template explains how to render the 'Workspace' content area in the main window.
-->
<DataTemplate x:Key="WorkspacesTemplate">
<TabControl
IsSynchronizedWithCurrentItem="True"
ItemsSource="{Binding}"
ItemTemplate="{StaticResource ClosableTabItemTemplate}"
Margin="4"
/>
</DataTemplate>
The Workspaces property which is bound to the HeaderedContentControl's Content property, has a collection of UserControls, which are rendered in the tabs. This all works fine.
The problem is that when i select a row in a grid in one of the UserControls, switch to a different tab, and then return, the selected row is reset. The same happens if a RowDetails is open - when I switch away and back to the tab, it is collapsed.
Any way around this?
Edit: After looking at the proposed solutions for the TabControl behaviour, I'm wandering if I might ditch it altogether. Any ideas for a UI that will allow me to keep several relatively complex UserControls and switch between them, not loosing the visuals in the process?
Thanks!
This is a common problem with the TabControl. Since it only displays the content of the selected tab. If your tab items are not visuals themselves and are presented with a DataTemplate, then the controls will be created and released as you switch tabs.
There are two solutions to this problem here and here, which attempt to retain the visuals for each tab.
I am using a ImageButton as
<Button Width="80" Height="25"
VerticalAlignment="Top"
HorizontalAlignment="Right"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Margin="0,0,1.5,0"
Name="btnActivate"
Click="OnActivate">
<StackPanel Orientation="Horizontal" Margin="3">
<Image Source="Shutdown.ico"
Width="12" Height="12"
Margin="0,0,5,0"/>
<TextBlock>Activate</TextBlock>
</StackPanel>
</Button>
I want to change the Content of button to 'Deactivate' when I click on it without changing the image. How can I do that? And also I need to some operations based on the content of button in my C# code.
You could just add a name to the TextBlock
<TextBlock Name="textBlock1">Activate</TextBlock>
and use it to modify the content in your OnActivate event handler
textBlock1.Text = "Deactivate";
I'm working on a Silverlight Polling control. My goal is to have a Button that contains other controls, so that when a user clicks on this combination, stuff happens.
Here's the basic XAML:
<Button Grid.Row="1" Grid.Column="0" Style="{StaticResource AnswerButton}">
<StackPanel Grid.Row="1" Grid.Column="0" Height="Auto" Width="Auto" Style="{StaticResource StackPnl}">
<TextBox Text="this is a text box" Style="{StaticResource Answer}" />
<ProgressBar Style="{StaticResource PollProgress}" />
</StackPanel>
</Button>
That works fine, but assume I don't have the StackPanel, etc, defined:
<Button Grid.Row="1" Grid.Column="0" Style="{StaticResource AnswerButton}">
</Button>
But that I want to add the StackPanel, TextBox, and ProgressBar at runtime.
Looking at just the first hurdle that I've run into, how do I dynamically add the StackPanel to the Button control?
Alternatively, if someone knows of a better way to do this...
var panel = new StackPanel();
Button.Content = panel;