How can i set a ControlPanelItem Icon?

[Jacob]

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

 

[Dilyan Traykov]

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

[Jacob]

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.