How can i set a ControlPanelItem Icon?

3 posts, 1 answers
  1. Jacob
    Jacob  avatar
    49 posts
    Member since:
    Apr 2016

    Posted 13 Dec 2016 Link to this post

    Hi Telerik,

    I have two Control Panel Items set in a single style for all my grids. The column chooser icon that comes out of the box looks fine. but I can't find where I can change the other one. Where can I learn more about how those icons are defined? I would like some sort of an arrow pointing down.

    Here is the code for the ControlPanelItemCollection

    <telerik:ControlPanelItemCollection>
                        <telerik:ControlPanelItem>
                            <telerik:ControlPanelItem.ButtonContent>
                                <Path Width="16" Height="16" HorizontalAlignment="Center" VerticalAlignment="Center" Data="F1M511.6665,467.2715C509.6575,468.2995,507.1905,467.5095,506.1635,465.5005C505.1325,463.4915,505.9265,461.0325,507.9355,460.0005C509.9445,458.9745,512.4095,459.7695,513.4375,461.7745C514.4695,463.7825,513.6775,466.2405,511.6665,467.2715 M518.5605,462.8565L517.8825,460.0155L515.3935,460.2825C515.1415,459.8585,514.8505,459.4725,514.5225,459.1275L515.4435,456.8975L512.9515,455.3645L511.3965,457.2925C510.8575,457.1515,510.3025,457.0815,509.7415,457.0775L508.7675,454.9135L505.9375,455.6715L506.2705,458.0665C505.8795,458.3075,505.5215,458.5835,505.2025,458.8835L503.0535,458.0005L501.5175,460.4875L503.3665,461.9795C503.2315,462.4865,503.1515,463.0135,503.1415,463.5435L501.0335,464.4175L501.7125,467.2605L504.0635,467.0085C504.3355,467.4795,504.6545,467.9065,505.0235,468.2815L504.1575,470.3765L506.6475,471.9095L508.1425,470.0605C508.6495,470.1855,509.1655,470.2555,509.6925,470.2615L510.5785,472.3905L513.4255,471.7135L513.1675,469.2965C513.6075,469.0285,514.0145,468.7215,514.3635,468.3765L516.5455,469.2745L518.0815,466.7855L516.1495,465.2305C516.2665,464.7565,516.3315,464.2705,516.3385,463.7805z" Stretch="Fill" />
                            </telerik:ControlPanelItem.ButtonContent>
                            <telerik:ControlPanelItem.Content>
                                <Button Content="Export to Excel (incompleted feature)"></Button>
                            </telerik:ControlPanelItem.Content>
                        </telerik:ControlPanelItem>
                        <telerik:ControlPanelItem ButtonTooltip="Column chooser" >
                            <telerik:ControlPanelItem.ContentTemplate>
                                <DataTemplate>
                                    <ListBox ItemsSource="{Binding VisibleColumns}"  BorderThickness="0">
                                        <ListBox.ItemTemplate>
                                            <DataTemplate>
                                                <CheckBox Content="{Binding Header, Mode=OneWay}"
                                                      IsChecked="{Binding IsVisible, Mode=TwoWay}" />
                                            </DataTemplate>
                                        </ListBox.ItemTemplate>
                                    </ListBox>
                                </DataTemplate>
                            </telerik:ControlPanelItem.ContentTemplate>
                        </telerik:ControlPanelItem>
                    </telerik:ControlPanelItemCollection>

     

    By the way, I dont get what is all this "Data". I just left it there from one of your samples, if you might as well please clarify this for me?

     

    Thank you

     

  2. Answer
    Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    1171 posts

    Posted 15 Dec 2016 Link to this post

    Hello Jacob,

    You can set the ControlPanelItem's ButtonContent to any element you like. For our examples, we've used a Path which enables you to draw curves and complex shapes. You can have a look at the following MSDN article for more information on how to draw your custom shapes.

    Regarding your second question, the Path.Data property sets a Geometry that specifies the shape to be drawn. This article should clarify this even further.

    Additionally, please note that you should specify a Fill color for the Path for it to show.

    I hope this clarifies things up for you. If I can further assist you in any way, please let me know.

    Regards,
    Dilyan Traykov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Jacob
    Jacob  avatar
    49 posts
    Member since:
    Apr 2016

    Posted 23 Dec 2016 in reply to Dilyan Traykov Link to this post

    Thank you Dilyan. I could use a tool to export an icon to a xaml geometry code. Bit of a hardwork for a simple icon, but I am done.

Back to Top