wpfuser-interfacecomboboxcontextmenucustomizing

WPF Combobox in Button and Change Scroll InterFace, Data binding to a custom? like this upload picture


This Model

public class Media
{
    private List<string> mediaName;

    public List<string> MediaName
    {
        get { return mediaName; }
        set { mediaName = value; }
    }

}

this xaml Code

<ComboBox x:Name="MediaCombo" ItemsSource="{Binding Media}" SelectionChanged="MediaCombo_SelectionChanged">
  <ComboBox.ItemTemplate>
    <DataTemplate>
     <TextBlock Text="{Binding}" />
    </DataTemplate>
  </ComboBox.ItemTemplate>

I can't find way, contextmenu.. combobox... etc.. How to i

how to Make like picture? Combobox Image


Solution

  • Welcome to SO!

    Don't be surprised if this question gets flagged for closure, this site is for answers to very specific questions rather than "how do I do this?"

    To get you started though, you'll need to template your control to replace the default appearance. If you place your edit cursor over the ComboBox declaration in the XAML, go to the properties page, click the little box to the right of Miscellaneous->Template then select "Convert to new resource" then VS will template the control out for you. (In the case of ComboBox you'll probably also need to add a project reference to PresentationFramework.Aero2).

    The control template that gets created will have a ScrollViewer in it with x:Name="DropDownScrollViewer", so repeat this process on that to template out that element into a new template called ScrollViewerControlTemplate1. That will have a control for the actual vertical scrollbar with x:Name="PART_VerticalScrollBar", so repeat yet again to get a final control template called ScrollBarControlTemplate1. This is the scrollbar you want to change the appearence of, so you can simply override the content of that to get the effect you're after e.g.:

        <ControlTemplate x:Key="ScrollBarControlTemplate1" TargetType="{x:Type ScrollBar}">
            <Border BorderBrush="{DynamicResource VS.Environment.ScrollBarBorderBrush}" Uid="Border_3" Padding="5">
                <Grid Uid="Grid_1">
                    <Border BorderThickness="1" BorderBrush="Gray" CornerRadius="5"/>
                    <Track x:Name="PART_Track" IsDirectionReversed="True" Uid="PART_Track">
                        <Track.Thumb>
                            <Thumb Uid="Thumb_1">
                                <Thumb.Template>
                                    <ControlTemplate>
                                        <Border Background="Gray" CornerRadius="5"/>
                                    </ControlTemplate>
                                </Thumb.Template>
                            </Thumb>
                        </Track.Thumb>
                    </Track>
                </Grid>
            </Border>
        </ControlTemplate>
    

    ...which will result in this:

    enter image description here

    I haven't done the paging buttons, but it's basically the same idea. Look for the elements of type RepeatButton in the original ScrollBarControlTemplate1 that gets created (which I removed) and place them in the ScrollViewerControlTemplate1 instead below the ScrollContentPresenter which contains the list elements themselves.