Custom scrollviewer template scroll button - wpf

I have been working on an issue where I want a scrollviewer whose scroll bar is replaced with a button to scroll left and a button to scroll right. (seperate buttons in different grid locations), however I have been struggling to get my head around it as the scrollviewers quite a complicated control.
Lets say I am creating a new control template for scrollviewer and I want to add an extra button into the template that would scroll the content to the right. How would I hook into the command that moves the horizontalscrollbar right. For example my code might have the following scroll bar and buttons and I want to hook into "horizontalscrollbars" right scroll button.
<ScrollBar x:Name="HorizontalScrollBar"
Grid.Column="0"
IsTabStop="False"
Maximum="{TemplateBinding ScrollableWidth}"
Margin="0,0,0,0"
Minimum="0"
Orientation="Horizontal"
Grid.Row="0"
Visibility="Collapsed"
Value="{TemplateBinding HorizontalOffset}"
ViewportSize="{TemplateBinding ViewportWidth}"
/>
<Button Grid.Column="0"
x:Name="LeftBtnScroll">
</Button>
<Button Grid.Column="2"
x:Name="RightBtnScroll">
</Button>
p.s I don't have access to blend.

You probably won't like this answer, but you'll also have to define a ControlTemplate for the Scrollbar element as well... that is the element that has the Buttons that move the content. You can find the default ControlTemplate for the Scrollbar on the ScrollBar Styles and Templates page on MSDN.
On that page, you'll see a section called ScrollBar Parts. This details the named parts of this ControlTemplate. A named part is an element that the 'code behind' accesses to provide some functionality. When defining a new ControlTemplate, you must include these named parts, or some (or maybe all) of the functionality will not work as expected.
The Buttons in the ScrollBar are the named parts that are of type RepeatButton. However, using this method, you will only be able to define your own version of those RepeatButtons and not add additional ones. The functionality that actually moves the content comes from the IScrollInfo interface and have not been exposed by the ScrollBar control, so you cannot hook additional Button clicks to them.
Failing that, the alternative is even longer... you'll need to define your own custom scroll panel that implements the IScrollInfo interface. In doing this, you can then provide your own custom scroll functionality and arrange everything exactly the way that you want:
<ScrollViewer CanContentScroll=”True”>
<YourXmlNamespacePrefix:YourCustomPanel>
<!--Your Content-->
</YourXmlNamespacePrefix:YourCustomPanel>
</ScrollViewer>
This operation is explained beautifully in chapter 7 of the WPF Control Development Unleashed book... you can find a PDF copy online at http://www.adorkable.us/books/wpf_control_development.pdf. It's well worth a look.
[UPDATE 27/11/2014: Sorry, this link is now broken... you'll have to buy the book to see it now.]

Related

wpf controls traveling around the grid/stack panel and not staying put

I am building a user control in WPF and put a few buttons in a stackpanel laying inside a grid. Problem is that when I build the app and run it, the buttons "sail around" and don't stay where I put them in the designer window. Is there any attribute I'm missing(or some sort of container?)?
Thanks.
Try setting the alignment properties of your grid:
<Grid HorizontalAlignment="Left" VerticalAlignment="Top">
...
</Grid>

WPFToolkit:Split button dropdown button disable button

I am using WPF split button which is inherited from
xmlns:extToolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit/extended"
The issue is I want to disable , the button ' the one below(Right side of Button 'Conf' in below 'downarrow present in the below fig) , If user clicks on Left side of the button the rightside should be disabled and the button(leftside) background should change to yellow.please find below the xaml , I am using the wpf split button , dropdown content in this case .please let me know if you have any idea
<extToolkit:SplitButton x:Name="ABCbutton"
VerticalAlignment="Center"
Command="{Binding ACommand}"
FontSize="16>
<TextBlock HorizontalAlignment="Center"
IsEnabled="{Binding IsEnabled, ElementName=AButton}"
Text="A"/>
<extToolkit:SplitButton.DropDownContent>
<StackPanel>
<Button Command="{Binding BCommand}"
Padding="3"
Style="{DynamicResource
DropDownButtonMenuButton}">
<TextBlock Margin="0,3,6,3"
Text="B"/>
</Button>
<Button Command="{Binding BCommand}"
Padding="3"
Style="{DynamicResource
DropDownButtonMenuButton}">
<TextBlock Margin="0,3,6,3"
HorizontalAlignment="Stretch"
Text="C"/>
</Button>
</StackPanel>
</extToolkit:SplitButton.DropDownContent>
</extToolkit:SplitButton>
In a case like this, you will likely be better off creating your own control. The split button can't really handle what you are talking about without a good deal of modification.
Essentially your new control will consist of two buttons, visually styled so that they look like they blend together. Each will have it's own background and enabled property. Add a ViewModel to help control behaviors and set properties, and I think you would be in business. Keep in mind that all of the controls that are supplied in any of the toolkits, frameworks, control packs, etc are made with the primitive types of drawing and framework elements (line, rectangle, border, content presenter, panel, etc) with specialized behavior code.
I end up making a lot of custom controls just because there is not one that perfectly replicates what I want.

Lockable Surface in WPF

I want a custom Control in WPF which have a appearance similar to HTML, we use for showing Images in the centre of the screen with the whole screen locked and only image is showing.
I dont want to show images, I want to show UserControls within this section.
Can someone give suggestions of this?
In your Window, put all your controls in a single Grid, with a Border control (that contains your image) as the last item in the Grid (which means it will display on top of the other items). Toggle its Visibility via binding or code. Adjust styles as required.
<Window>
<Grid>
<!-- window controls go here --->
<Border Visibility="..." Background="#80000000"> <!-- EDITED -->
<!-- overlaid image (and/or other controls) goes here --->
<Image
Source="..."
Width="..."
Height="..."
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
<Grid>
</Window>
In Windows applications this is generally achieved using a modal dialog, i.e. you create a normal WPF window and show it using ShowDialog.

Bing Maps in a Listbox boundary issue

Normally the silverlight controls know where they are in terms of who is in front of or behind. An example is putting an image inside a listbox and when you scroll up and down in the listbox, the image will disappear/hide inside the listbox boundaries.
I have put a bing map object(the one that comes with the windows phone 7 sdk) inside a listbox. When I scroll to where the map is in the listbox, it is acting like I have some flag set to "Always on Top". I can't seem to find a property that is setting this or if it's inherent in the way the maps are designed.
I haven't tried this yet, but I'm curious if I add layers with pushpins in them if they too would act "Always on Top". I've included an image to explain. As you can see below, the map is outside of the listbox's bounding area and is even overlapping a button outside of the listbox.
Link to Map Image
<ListBox Height="590">
<TextBlock IsHitTestVisible="False" Foreground="#F80046" Style="{StaticResource PhoneTextExtraLargeStyle}" TextAlignment="Center" Text="Map"></TextBlock>
<my:Map Width="445" x:Name="EventMap" Margin="0,0,0,20" LogoVisibility="Collapsed" CopyrightVisibility="Collapsed">
<my:Map.CredentialsProvider>
<my:ApplicationIdCredentialsProvider ApplicationId="OMITED"></my:ApplicationIdCredentialsProvider>
</my:Map.CredentialsProvider>
</my:Map>
</ListBox>
I'm not sure what you're trying to accomplish, but this seems like more of a usage of ScrollViewer
<ScrollViewer>
<StackPanel>
<my:Map>
</StackPanel>
</ScrollViewer>
rather than ListBox. But anyway, I couldn't reproduce the problem. Does that button have some custom margins that could be doing that?
Here's the solution file I created to see the problem you have in the image. Note that I wasn't able to reproduce it in the solution.
http://dl.dropbox.com/u/129101/WindowsPhoneApplication1.zip

How do I make modal dialog for a Page in my WPF-application?

I have a WPF Window which has a among other controls hosts a Frame. In that frame I display different pages. Is there way to make a dialog modal to only a page? When I'm showing the dialog it should not be possible to click on any control on the page but it should be possible to click on a control on the same window that is not on the page.
If I am correct in interpreting your message, you want something that works similar to what
Billy Hollis demonstrates in his StaffLynx application.
I recently built a similar control and it turns out that this sort of idea is relatively simple to implement in WPF. I created a custom control called DialogPresenter. In the control template for the custom control, I added markup similar to the following:
<ControlTemplate TargetType="{x:Type local=DialogPresenter}">
<Grid>
<ContentControl>
<ContentPresenter />
</ContentControl>
<!-- The Rectangle is what simulates the modality -->
<Rectangle x:Name="Overlay" Visibility="Collapsed" Opacity="0.4" Fill="LightGrey" />
<Grid x:Name="Dialog" Visibility="Collapsed">
<!-- The template for the dialog goes here (borders and such...) -->
<ContentPresenter x:Name="PART_DialogView" />
</Grid>
</Grid>
<ControlTemplate.Triggers>
<!-- Triggers to change the visibility of the PART_DialogView and Overlay -->
</ControlTemplate.Triggers>
</ControlTemplate>
I also added a Show(Control view) method, which finds the the 'PART_DialogView', and adds the passed in view to the Content property.
This then allows me to use the DialogPresenter as follows:
<controls:DialogPresenter x:Name="DialogPresenter">
<!-- Normal parent view content here -->
<TextBlock>Hello World</TextBlock>
<Button>Click Me!</Button>
</controls:DialogPresenter>
To the buttons event handler (or bound command), I simply call the Show() method of the DialogPresenter.
You can also easily add ScaleTransform markup to the DialogPresenter template to get scaling effects shown in the video. This solution has neat and tidy custom control code, and a very simple interface for your UI programming team.
Hope this helps!
I have a project on github which is a custom FrameworkElement that allows you to display modal content over the primary content.
The control can be used like this:
<c:ModalContentPresenter IsModal="{Binding DialogIsVisible}">
<TabControl Margin="5">
<Button Margin="55"
Padding="10"
Command="{Binding ShowModalContentCommand}">
This is the primary Content
</Button>
</TabItem>
</TabControl>
<c:ModalContentPresenter.ModalContent>
<Button Margin="75"
Padding="50"
Command="{Binding HideModalContentCommand}">
This is the modal content
</Button>
</c:ModalContentPresenter.ModalContent>
</c:ModalContentPresenter>
Features:
Displays arbitrary content.
Does not disable the primary content whilst the modal content is being displayed.
Disables mouse and keyboard access to the primary content whilst the modal content is displayed.
Is only modal to the content it is covering, not the entire application.
can be used in an MVVM friendly way by binding to the IsModal property.
Why not just use nested message pumps to create modal controls
http://deanchalk.com/wpf-modal-controls-via-dispatcherframe-nested-message-pumps/
You are not looking for a modal dialog here. You need a function that will disable the "page" control, show a dialog, and re-enable it when the dialog closes.
I'm not too sure whether you understand what a modal dialog is meant to do though?

Resources